/*****__-__-__-__-__-__-__-__-__-__-___-__******\
|  												|
*	Theme Name: HackYa_17  						*
|	Theme URI: http://hackya.com  				|
*	Description: 2017 hackYa WordPress Theme 	*
|	Version: 0.0.1 								|
*	Author: hackYa 								*
|	Author URI: http://hackya.com/about  		|
*	Tags: hackYa, fastest WP Theme  			*
| 												|
*	License: All rights reserved  				*
|  												|
\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\
			box-sizing & clear
\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*
 * Global box-sizing reset.
 * border-box: padding and border are included in width/height calculations.
 * This prevents layout surprises when adding padding to sized elements.
 * font-smoothing + text-rendering: improve font rendering across platforms.
 */

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}


/* clear */

/*
 * Clearfix helper class.
 * Applied to floated-content containers (e.g. .site-header.clear) to
 * prevent parent height collapse when children are floated.
 * Uses the ::before + ::after pseudo-element technique (no extra markup needed).
 */
.clear:before,
.clear:after {
	content: ' ';
	display: table;
}

.clear:after {
	clear: both;
}

.clear {
	*zoom: 1;
}


/*════════════════════════════════════════════════════════════════════════════
 * ICOMOON ICON FONT
 * Custom icon font containing all theme-specific icons.
 * Loaded from /fonts/icomoon.* (eot/ttf/woff/svg for cross-browser support).
 * Usage: add class "icon-NAME" to any element (typically <span> or <i>).
 * Icons are drawn via CSS content: property on ::before pseudo-elements.
 * [class^="icon-"] catches classes starting with "icon-".
 * [class*=" icon-"] catches classes containing " icon-" (multiple classes).
 *════════════════════════════════════════════════════════════════════════════*/
/*
@font-face {
	font-family: 'icomoon';
	src: url('../fonts/icomoon.eot?exep1');
	src: url('../fonts/icomoon.eot?exep1#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?exep1') format('truetype'), url('../fonts/icomoon.woff?exep1') format('woff'), url('../fonts/icomoon.svg?exep1#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
*/

[class^="icon-"],
[class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-whatsapp-icon:before { content: "\e927"; }
.icon-kakao_story:before { content: "\e928"; }
.icon-chevron-right:before { content: "\e923"; }
.icon-chevron-left:before { content: "\e924"; }
.icon-time:before { content: "\e913"; }
.icon-thunderstorm:before { content: "\e919"; }
.icon-snow:before { content: "\e91a"; }
.icon-rain:before { content: "\e91b"; }
.icon-sunny:before { content: "\e91c"; }
.icon-mist:before { content: "\e91d"; }
.icon-haze:before { content: "\e91e"; }
.icon-fog:before { content: "\e91f"; }
.icon-cloudy:before { content: "\e920"; }
.icon-headphone_sc:before { content: "\e921"; }
.icon-lock:before { content: "\e912"; }
.icon-caret_down:before { content: "\e90b"; }
.icon-up-open_chevron:before { content: "\e90a"; }
.icon-Pinterest_icon:before { content: "\e926"; }
.icon-hackya-quote_left:before { content: "\e925"; }
.icon-language_switcher:before { content: "\e900"; }
.icon-post_date:before { content: "\e901"; }
.icon-hackya_user:before { content: "\e90c"; }
.icon-email:before { content: "\e917"; }
.icon-home:before { content: "\e902"; }
.icon-post_category:before { content: "\e903"; }
.icon-post_comment:before { content: "\e907"; }
.icon-cog:before { content: "\e904"; }
.icon-switch:before { content: "\e908"; }
.icon-share2:before { content: "\e905"; }
.icon-google-plus2:before { content: "\e90e"; }
.icon-facebook2:before { content: "\e906"; }
.icon-twitter:before { content: "\e90f"; }
.icon-rss:before { content: "\e909"; }
.icon-wordpress:before { content: "\e911"; }
.icon-pen:before { content: "\e90d"; }
.icon-spinner:before { content: "\e910"; }
.icon-play3:before { content: "\e915"; }
.icon-pause2:before { content: "\e916"; }
.icon-volume-high:before { content: "\e914"; }
.icon-volume-mute:before { content: "\e918"; }
.icon-soundcloud:before { content: "\e922"; }
.icon-embed2:before { content: "\e929"; }

/*//////// End of Icon Fonts /////////*/


:root {
   --color-black: #000;
  --color-white: #fff;
  --color-accent: #0049d1;
  --color-heading: var(--color-black);
  --color-main: var(--color-black);
  --color-paragraph: #545773;
  --color-link-text: var(--color-accent);
  --color-link-text-hover: var(--color-black);
  --color-error: #cc2e2e;
  --color-success: #21aa14;    
  --color-button: var(--color-white);
  --color-button-hover: var(--color-white);
  --color-button-background: var(--color-paragraph);
  --color-button-background-hover: #2a2d3e;
  --border-radius-button: 3px;
  --border-radius-select: 3px;

}

#reverseOrder {
    appearance: none;
    background-color: var(--color-button-background);
    border: var(--border-width-input-field) solid var(--color-button-background);
    border-radius: var(--border-radius-button);
    color: var(--color-button);
    cursor: pointer;
    display: inline-block;
    padding: 1rem 2rem;
    transition: all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    white-space: nowrap;
    width: auto;
}

#reverseOrder:hover {
    background-color: var(--color-button-background-hover);
    border-color: var(--color-button-background-hover);
    color: var(--color-button-hover);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\
			Typography
\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

body {
    font: 300 100% "Lato", "Nanum Gothic", "NanumBarunGothic", 나눔고딕, "맑은 고딕", "Malgun Gothic", 돋움, Dotum, -apple-system, "BlinkMacSystemFont", "Segoe UI", Helvetica, Arial, sans-serif;
    color: #5a5350;
}

img {
	max-width: 100%;
	height: auto; /*prevent img stretching */
	vertical-align: bottom;
}

a {
	color: dodgerblue;
	text-decoration: none;
	transition: all 0.25s linear;
}

a:hover {
	color: #3500ff;
}

a:focus {
	outline: 0;
}

a:hover,
a:active {
	outline: 0;
}

input:focus {
	outline: 0;
	border: 1px solid #04A4CC;
}

blockquote {
	border-left: 3px solid #ccc;
	padding-left: 2em;
}


/*════════════════════════════════════════════════════════════════════════════
 * GOOGLE CUSTOM SEARCH ENGINE (CSE) UI
 *
 * Z-index stack (search components):
 *   #search-toggle-btn          z:206  — always on top (toggle + close icon)
 *   .hackya_search              z:205  — full-screen input overlay
 *   #hackya-search-results-panel z:300 — results panel (above overlay)
 *   #hackya-result-modal        z:400  — iframe modal (topmost)
 *
 * Flow:
 *   1. User clicks magnifier → .hackya_search.active (search overlay fades in)
 *   2. User types query → CSE renders results into #hackya-search-results
 *   3. MutationObserver detects results → results panel slides in, overlay closes
 *   4. User clicks result → iframe modal opens with the page loaded inside
 *════════════════════════════════════════════════════════════════════════════*/

/* ── Search Input Overlay ─────────────────────────────────────────────────── */

.hackya_search {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(5, 8, 120, 0.93);
	z-index: 205; /* above chevron(204), login panel(202) */
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 12vh;
	box-sizing: border-box;
	/* hidden state */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s 0.3s;
	pointer-events: none;
}

.hackya_search.active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0s 0s;
	pointer-events: auto;
}

/* CSE input container — let Google render its widget naturally.
   We only control the outer size and centering. */
#hackya-search-box {
	width: 55%;
	min-width: 280px;
	max-width: 680px;
	font-size: 1.1em;
}

/* Suppress Google branding below the input */
#hackya-search-box .gsc-branding { display: none !important; }

.noscroll #search-toggle-btn { display: none; }

/* ── Search Button (magnifier icon) ──────────────────────────────────────── */

#search-toggle-btn {
	animation: .5s ease-out 0s 1 drop;
	z-index: 206; /* above search overlay so X is always clickable */
	display: block;
	border-radius: 50%;
	height: 3em;
	width: 3em;
	background-color: transparent;
	border: none;
	outline: none;
	position: fixed;
	top: 1em;
	right: 1em;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

#search-toggle-btn.scroll-down {
	position: fixed !important;
	animation: 1.5s ease-out 0s 1 rise !important;
	top: -3.75em !important;
}

#search-toggle-btn.scroll-up { top: .5em !important; }
#search-toggle-btn.scroll-up.hide { display: none; }

#search-toggle-btn:before,
#search-toggle-btn:after {
	display: block;
	content: "";
	transition: all 0.3s ease-in-out;
}

#search-toggle-btn:before {
	position: absolute;
	height: 50%;
	width: 50%;
	left: 25%;
	top: 20%;
	border-radius: 50%;
	border: 5px solid #fff;
}

#search-toggle-btn:after {
	position: absolute;
	left: 65%;
	top: 52%;
	transform: rotate(-40deg);
	height: 32.5%;
	width: 10.5%;
	background-color: #fff;
	border-radius: 1em;
}

#search-toggle-btn.active { top: .5em !important; animation: none !important; }

#search-toggle-btn.active:before,
#search-toggle-btn.active:after {
	content: '';
	position: absolute;
	width: .375em;
	height: 2.5em;
	background-color: white;
	border-radius: 2px;
	top: .25em;
	border: none;
	left: 1.25em;
	transition: all 0.3s ease-in-out;
}

#search-toggle-btn.active:before { transform: rotate(45deg); }
#search-toggle-btn.active:after  { transform: rotate(-45deg); }

/* ── Search Results Panel ─────────────────────────────────────────────────── */

#hackya-search-results-panel {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 300; /* topmost — above everything */
	background: rgba(5, 8, 100, 0.97);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* hidden state */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-1.5em);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
	pointer-events: none;
}

#hackya-search-results-panel.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0s;
	pointer-events: auto;
}

#hackya-search-close {
	position: fixed;
	top: 1em;
	right: 1.5em;
	z-index: 301;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 50%;
	width: 2.2em;
	height: 2.2em;
	color: rgba(255,255,255,0.8);
	font-size: 1.2em;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
}

#hackya-search-close:hover {
	color: #fff;
	border-color: dodgerblue;
}

#hackya-search-results {
	max-width: 800px;
	margin: 5em auto 3em;
	padding: 0 1.5em;
	color: #fff;
}

/* Style Google's result items */
#hackya-search-results .gsc-result {
	background: rgba(255,255,255,0.04) !important;
	border-bottom: 1px solid rgba(255,255,255,0.08) !important;
	padding: 1em 0 !important;
}

#hackya-search-results .gs-title,
#hackya-search-results .gs-title * {
	color: #62b8ff !important;
	text-decoration: none !important;
	font-size: 1.05em !important;
}

#hackya-search-results .gs-title:hover,
#hackya-search-results .gs-title:hover * {
	color: #fff !important;
	text-decoration: underline !important;
}

#hackya-search-results .gs-snippet {
	color: rgba(255,255,255,0.75) !important;
	line-height: 1.5 !important;
}

#hackya-search-results .gs-visibleUrl {
	color: rgba(30,200,100,0.8) !important;
	font-size: 0.85em !important;
}

#hackya-search-results .gsc-cursor-page {
	background: rgba(30,144,255,0.15) !important;
	color: #62b8ff !important;
	border: 1px solid rgba(30,144,255,0.3) !important;
	border-radius: 3px !important;
}

#hackya-search-results .gsc-cursor-current-page {
	background: dodgerblue !important;
	color: #fff !important;
}

#hackya-search-results .gsc-branding { display: none !important; }

/* ── Search Result iframe Modal ──────────────────────────────────────────── */

#hackya-result-modal {
	display: none;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 400;
	background: rgba(0,0,5,0.92);
	flex-direction: column;
}

#hackya-result-modal.active {
	display: flex;
}

#hackya-result-modal-bar {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.5em 1em;
	background: rgba(10,10,40,0.98);
	border-bottom: 1px solid rgba(30,144,255,0.3);
	flex-shrink: 0;
}

#hackya-result-modal-url {
	flex: 1;
	color: rgba(255,255,255,0.5);
	font-size: 0.8em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#hackya-result-modal-open {
	background: rgba(30,144,255,0.2);
	border: 1px solid rgba(30,144,255,0.5);
	border-radius: 3px;
	color: #62b8ff;
	padding: 0.3em 0.8em;
	font-size: 0.8em;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}

#hackya-result-modal-open:hover { background: rgba(30,144,255,0.4); color: #fff; }

#hackya-result-modal-close {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 50%;
	width: 2em; height: 2em;
	color: rgba(255,255,255,0.7);
	font-size: 1em;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

#hackya-result-modal-close:hover { border-color: dodgerblue; color: #fff; }

#hackya-result-modal iframe {
	flex: 1;
	width: 100%;
	border: none;
	background: #fff;
}

/* End of Google Search */


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\
			Layout
\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


/* global */

html {
    scrollbar-gutter: stable; /* reserves scrollbar column without forcing one */
}

html,
body,
.perspective {
	width: 100%;
	min-height: 100%;
}

body {
	overflow-y: scroll;
	overflow-x: hidden;
	background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(13, 30, 84, 1) 52%, rgba(153, 0, 255, 1) 100%);
	/*background: 
        radial-gradient(circle at 50% 0%, rgba(0,0,0,1) 0%, rgba(13,30,84,1) 52%, rgba(153,0,255,1) 100%) top / 100% 30% no-repeat,
        linear-gradient(#fff, #fff) bottom / 100% 70% no-repeat;*/
}

body.noscroll {
	background-image: radial-gradient(#0039af, black);
	overflow-y: scroll;
	position: fixed;
}

main {
    min-height: calc(100vh - 160px);
	/*set footer to 160px */
    padding: 1em 8% 0 2%;
    margin: 0 auto;
    background: #FFF;
    padding-bottom: 0.1rem;/* needed to prevent margin collapsing*/
}


@media (min-width: 1200px) {
    main {
        margin-right: 30%;
    }
}

.wrapper {
	margin: 0 auto;
	position: relative;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\
    PAGES
\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


/* homepage */

.front-title a {
	color: #29a4ff;
}

.front-title a:hover {
	background: -webkit-linear-gradient(#fc50ff, #29a4ff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.post.type-post {
	width: 100%;
	float: left;
	padding-left: 2em;
	/*margin-bottom: 1em;*/
}

.post.type-post header {
	padding-bottom: .5em;
}

.post.type-post h1 {
	border-left: 0.25em solid dodgerblue;
	padding-left: .5em;
	font-size: 1.875em;
}

.post.type-post h2 {
	color: #007cff;
	border-bottom: .025em solid #7969fb;
	padding-bottom: .25em;
	border-left: 0.25em solid #9075ff;
	padding-left: .5em;
	font-weight: 600;
}

.front-excerpt {
	display: inline-block;
	float: left;
}

.thumb-frame {
	max-width: 300px;
	overflow: hidden;
	float: left;
	margin-right: 1.5em;
}

.attachment-medium {
	min-width: 18.75em;
	max-height: 10.938em;
	transition: all .2s ease-in-out !important;
	opacity: 1;
}

.has-post-thumbnail a {}

.thumb-frame img:hover {
	filter: contrast(1.5);
	filter: blur(2px);
	transform: scale(1.1);
}

.post.type-post p {
	line-height: 1.875em;
	font-size: 1.125em;
	font-family: '애플 SD 산돌고딕 Neo','Apple SD Gothic Neo','Helvetica Neue',Helvetica,나눔바른고딕,NanumBarunGothic,나눔바른고딕OTF,NanumBarunGothicOTF,'Noto Sans','Noto+Sans','notokr-demilight','맑은 고딕','Malgun Gothic',Dotum,'돋움',sans-serif!important;
    font-weight: 400;
}

.front-view-content {
	display: block;
	float: right;
	font-weight: 500;
	padding: 1em 1em 1em 0;
}

.hackya-social {
	display: none;
	/* temporary */
}

/*────────────────────────────────────────────────────────────────────────────
 * AUTHOR BIO SECTION
 * Appears at the bottom of single posts via hackya_author_bio()
 * in template-tags.php.
 *────────────────────────────────────────────────────────────────────────────*/

.author_bio_section {
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 1em 1.25em;
	margin-bottom: 2em;
	background: #f8f8fc;
	border-radius: 0.5em;
	border: 1px solid #e8e8f0;
	clear: both;
}

.author_bio_section__avatar img {
	display: block;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	object-fit: cover;
}

.author_bio_section__info {
	display: flex;
	align-items: center;
	gap: 1.25em;
	flex-wrap: wrap;
}

.author_bio_section .author_name {
	margin: 0;
	font-size: 0.95em !important;
	font-weight: 700;
}

.author_bio_section .author_name a {
	color: #1a1a2e;
	text-decoration: none;
}

.author_bio_section .author_name a:hover {
	color: #1a73e8;
}

/* YouTube link */
.author_bio_section__yt {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.85em;
	font-weight: 600;
	color: #ff0000;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.author_bio_section__yt:hover {
	opacity: 0.8;
	color: #ff0000;
}

.author_bio_section__yt svg {
	flex-shrink: 0;
}

img.avatar {
	float: left;
	border-radius: 30%;
	margin-right: 2em;
}

#other-posts {
	clear: both;
	padding-left: 5%;
	background: white;
	position: relative; /*needed to hide disqus */
}

#related_posts:before {
	clear: both;
}

#related_posts {
	padding-left: 0;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	clear: both;
	padding-bottom: 1em;
}

#related_posts h4 {
	margin: .5em 0;
}

#related_posts li {
	list-style-type: none;
	width: 30%;
}

.attachment-related {
	min-height: 130px;
	max-height: 130px;
	min-width: 100%;
	opacity: 1;
}


/* Single.php */

.single-section {
	max-width: 46em;
	margin: auto;
}

.post-info {
	display: block;
	color: #777;
	clear: both;
	width: 115%;
	font-size: .925em;
	margin-bottom: 1em;
}

.icon-hackya_user {
	font-size: 1.25em;
	padding-right: .125em;
}

.post-info > span {
	margin-right: 1.5em;
	display: inline-block;
}

.last_modified {
	display: block;
	margin-bottom: 1em;
	font-weight: 600;
	color: dodgerblue;
}


/*════════════════════════════════════════════════════════════════════════════
 * KEYFRAME ANIMATIONS
 *
 * fadeIn: full page fade-in on load (applied to body in <head> <style>)
 * All other keyframes (step-rotate, drophead, drop, rise, slide-in,
 * slide-out) have moved to header.css.
 *════════════════════════════════════════════════════════════════════════════*/

@keyframes fadeIn {
    0%   { opacity: 1; }
    100% { opacity: 1; }
}

/*════════════════════════════════════════════════════════════════════════════
 * PJAX PAGE TRANSITIONS
 * Controls the <main> fade during pushState navigation (pjax.js).
 * .pjax-loading is added by JS during the 150ms content-swap window.
 *════════════════════════════════════════════════════════════════════════════*/

main {
    transition: opacity 0.15s ease;
}

main.pjax-loading {
    opacity: .7; /* adjust to taste — 1 = no fade, 0 = full flash */
	background: #fff;
    min-height: 100vh;
}



/*착동 page css */
.yt-li h4 {
  position: relative;
  float: left;
  cursor: pointer;
  margin-top: 0;
  font-size: 18px;
  color: #00aaff;
  transition: background-color 0.5s ease, color 0.5s ease;
  pointer-events: none; /* This allows the click to pass through to the checkbox */
}

.yt-li section {
  color: rgba(48, 69, 92, 0.8);
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 2px;
  position: relative;
  overflow: hidden;
  /*max-height: 1200px;*/
  opacity: 1;
  transform: translate(0, 0);
  margin-top: 14px;
  padding: 0 1em;
  z-index: 2;
  clear: both;
  max-height: 2000px; /* needed for closing animation to happen */
  transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease, margin-top 0.4s ease;
}

ul#yt-ul {
  max-width: 768px;
  list-style: none;
  padding: 0;
  /*margin-top: 4em;*/
}

ul#yt-ul .yt-li {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: 4px;
  padding-top: 18px;
  border-bottom: 1px dotted #dce7eb;
  color: black;
  transition: background-color 0.5s ease, color 0.5s ease;
}

ul#yt-ul li:nth-of-type(1) {
  animation-delay: 0.25s;
}
ul#yt-ul li:nth-of-type(2) {
  animation-delay: 0.5s;
}
ul#yt-ul li:nth-of-type(3) {
  animation-delay: 0.75s;
}
ul#yt-ul li:nth-of-type(4) {
  animation-delay: 1s;
}
ul#yt-ul li:last-of-type {
  padding-bottom: 0;
}
ul#yt-ul li i {
  position: relative;
  float: right;
  margin-top: 1em;
  margin-left: 40em;
  pointer-events: none;
}
ul#yt-ul li i:before,
ul li i:after {
  content: "";
  position: absolute;
  background-color: #ff6873;
  width: 3px;
  height: 9px;
}
ul#yt-ul li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
ul li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
ul#yt-ul li input[type="checkbox"] {
  position: absolute;
  top: 1em;
  left: 0;
  cursor: pointer;
  width: 100%;
  height: 50px;
  z-index: 10;
  opacity: 0;
}

ul#yt-ul li input[type="checkbox"]:checked ~ section {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}
ul#yt-ul li input[type="checkbox"]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
ul#yt-ul li input[type="checkbox"]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}

a.yt-link {
  display: block;
  position: relative;
  max-width: 50%;
  z-index: 99;
}

.wv-point-title {
	font-weight:600;
	color: #bf0000;
}

@keyframes flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}


.gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet, .gs-fileFormatType {
    font-size: 16px;
}

/* ── Responsive YouTube / iframe embeds inside post content ─────────────── */
.single-section iframe[src*="youtube"],
.single-section iframe[src*="youtu.be"],
.entry-content iframe[src*="youtube"],
.entry-content iframe[src*="youtu.be"],
article iframe[src*="youtube"],
article iframe[src*="youtu.be"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
}


/* ── Read-more link — reduce top padding on mobile ──────────────────────── */
@media (max-width: 768px) {
    .front-view-content {
        padding: 0.5em 0.5em 1em 0;
    }
}