/* ============================================================
   iLovePhone Academy — Custom CSS
   โทนสีและ layout แบบ fix-it-chiangmai-platform
   ใส่ใน WordPress > Appearance > Customize > Additional CSS
   ============================================================ */
/* --- Color Variables --- */
:root {
}

/* --- Global --- */
body {
	font-family: 'LINE Seed Sans TH', 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--ilp-gray-900);
	background: #fff;
}

/* --- Header / Navigation --- */
.wp-block-navigation a,
.wp-block-site-title a {
	color: var(--ilp-gray-900) !important;
	font-weight: 500;
	transition: color .2s;
}

.wp-block-navigation a:hover {
	color: var(--ilp-primary) !important;
}

/* --- Hero Section --- */
.hero-section,
.wp-block-cover {
	background: linear-gradient(135deg, var(--ilp-gray-50) 0%, rgba(204,32,40,0.05) 100%) !important;
}

/* --- Buttons: Primary (Red) --- */
.wp-block-button .wp-block-button__link,
.wp-element-button {
	background-color: var(--ilp-primary) !important;
	color: #fff !important;
	border-radius: var(--ilp-radius) !important;
	padding: .75rem 1.5rem !important;
	font-weight: 600;
	transition: all .2s;
	border: none !important;
	box-shadow: var(--ilp-shadow);
}

.wp-block-button .wp-block-button__link:hover,
.wp-element-button:hover {
	background-color: var(--ilp-primary-hover) !important;
	box-shadow: var(--ilp-shadow-lg);
	transform: translateY(-1px);
}

/* --- Buttons: Outline --- */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--ilp-primary) !important;
	border: 2px solid var(--ilp-primary) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--ilp-primary) !important;
	color: #fff !important;
}

/* --- Cards (Group blocks) --- */
.wp-block-group.has-background,
.wp-block-column.has-background {
	border-radius: var(--ilp-radius-lg) !important;
	box-shadow: var(--ilp-shadow);
	transition: box-shadow 0.3s, transform .3s;
	overflow: hidden;
}

.wp-block-group.has-background:hover,
.wp-block-column.has-background:hover {
	box-shadow: var(--ilp-shadow-lg);
	transform: translateY(-4px);
}

/* --- Card with left border accent --- */
.card-accent-red {
	border-left: 4px solid var(--ilp-primary) !important;
}

.card-accent-dark {
	border-left: 4px solid var(--ilp-secondary) !important;
}

/* --- Category Badges / Pills --- */
.category-badge,
.wp-block-tag-cloud a {
	display: inline-block;
	padding: .25rem .75rem;
	background: var(--ilp-primary-light);
	color: var(--ilp-primary);
	border-radius: 9999px;
	font-size: .875rem;
	font-weight: 500;
	text-decoration: none;
	transition: all .2s;
}

.category-badge:hover,
.wp-block-tag-cloud a:hover {
	background: var(--ilp-primary);
	color: #fff;
}

/* --- Blog Post Cards --- */
.wp-block-post {
	border-radius: var(--ilp-radius-lg);
	overflow: hidden;
	box-shadow: var(--ilp-shadow);
	transition: box-shadow 0.3s, transform .3s;
	background: #fff;
}

.wp-block-post:hover {
	box-shadow: var(--ilp-shadow-lg);
	transform: translateY(-4px);
}

/* Post featured image */
.wp-block-post-featured-image img {
	border-radius: var(--ilp-radius-lg) var(--ilp-radius-lg) 0 0;
	object-fit: cover;
	width: 100%;
	height: 200px;
	transition: transform .3s;
}

.wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

/* Post title */
.wp-block-post-title a {
	color: var(--ilp-gray-900) !important;
	text-decoration: none !important;
	font-weight: 700;
	transition: color .2s;
}

.wp-block-post-title a:hover {
	color: var(--ilp-primary) !important;
}

/* Post meta */
.wp-block-post-date,
.wp-block-post-author {
	color: var(--ilp-gray-500);
	font-size: .875rem;
}

/* --- Headings --- */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	color: var(--ilp-gray-900);
	font-weight: 700;
}

h2.wp-block-heading {
	font-size: 1.875rem;
	margin-bottom: 1rem;
}

/* --- Accent color for links --- */
a {
	color: var(--ilp-primary);
	text-decoration: none;
	transition: color .2s;
}

a:hover {
	color: var(--ilp-primary-hover);
}

/* --- Article content prose --- */
.entry-content p,
.wp-block-post-content p {
	color: var(--ilp-gray-600);
	line-height: 1.75;
	margin-bottom: 1.25rem;
}

.entry-content h2,
.wp-block-post-content h2 {
	margin-top: 2rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--ilp-gray-200);
}

.entry-content ul li,
.wp-block-post-content ul li {
	color: var(--ilp-gray-600);
	margin-bottom: .5rem;
}

/* --- Footer --- */
.wp-block-template-part footer,
footer.wp-block-template-part {
	background-color: var(--ilp-gray-900) !important;
	color: #fff !important;
}

/* --- CTA Section (gradient red background) --- */
.cta-section {
	background: linear-gradient(135deg, var(--ilp-primary-light) 0%, rgba(204,32,40,0.08) 100%);
	border-radius: var(--ilp-radius-lg);
	padding: 2rem;
	text-align: center;
}

/* --- Search Bar --- */
.wp-block-search .wp-block-search__input {
	border-radius: var(--ilp-radius);
	border: 1px solid var(--ilp-gray-300);
	padding: .75rem 1rem .75rem 2.5rem;
	font-size: 1rem;
	transition: border-color 0.2s, box-shadow .2s;
}

.wp-block-search .wp-block-search__input:focus {
	border-color: var(--ilp-primary);
	box-shadow: 0 0 0 3px var(--ilp-primary-light);
	outline: none;
}

.wp-block-search .wp-block-search__button {
	background-color: var(--ilp-primary) !important;
	color: #fff !important;
	border-radius: var(--ilp-radius) !important;
}

/* --- Grid Layout for Blog --- */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 2rem;
}

@media (min-width: 768px) {
	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.blog-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- Featured Post (full-width card) --- */
.featured-post {
	display: flex;
	flex-direction: column;
	border-radius: var(--ilp-radius-lg);
	overflow: hidden;
	box-shadow: var(--ilp-shadow-lg);
	background: #fff;
}

@media (min-width: 768px) {
	.featured-post {
		flex-direction: row;
	}
	
	.featured-post .featured-image {
		width: 50%;
	}
	
	.featured-post .featured-content {
		width: 50%;
		padding: 2rem;
	}
}

/* --- Floating CTA (LINE + Phone) --- */
.floating-cta {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.floating-cta a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 9999px;
	box-shadow: var(--ilp-shadow-lg);
	transition: transform 0.2s, box-shadow .2s;
	text-decoration: none;
}

.floating-cta a:hover {
	transform: scale(1.1);
}

.floating-cta .line-btn {
	background: var(--ilp-green-500);
	color: #fff;
}

.floating-cta .phone-btn {
	background: #fff;
	color: var(--ilp-primary);
	border: 2px solid var(--ilp-primary);
}

/* --- Responsive Utility --- */
@media (max-width: 767px) {
	h1.wp-block-heading,
		  h1.wp-block-post-title {
		font-size: 1.75rem !important;
	}
	
	h2.wp-block-heading {
		font-size: 1.5rem !important;
	}
}

/* --- Import Prompt Font (Thai) --- */
/* LINE Seed Sans TH — ต้อง host font เองหรือใช้ CDN ของ LINE (ยังไม่มีบน Google Fonts) */
/* === Magic UI — CSS Only (iLovePhone CI) === */
/* 1. BlurFade — content เฟดเข้าตอนโหลด */
.entry-content > * {
	animation: ilp-fade .6s ease-out both;
}

.entry-content > :nth-child(2) {
	animation-delay: .1s;
}

.entry-content > :nth-child(3) {
	animation-delay: .15s;
}

.entry-content > :nth-child(4) {
	animation-delay: .2s;
}

.entry-content > :nth-child(5) {
	animation-delay: .25s;
}

@keyframes ilp-fade {
	from {
		opacity: 0;
		filter: blur(4px);
		transform: translateY(8px);
	}
	
	to {
		opacity: 1;
		filter: blur(0);
		transform: translateY(0);
	}
}

/* 2. Pulsating CTA Button */
.wp-block-button__link,.wp-element-button {
	animation: ilp-pulse 2.5s ease-in-out infinite;
	background: #CC2028 !important;
	border-color: #CC2028 !important;
}

.wp-block-button__link:hover,.wp-element-button:hover {
	background: #a01a20 !important;
	animation: none;
}

@keyframes ilp-pulse {
	0%,100% {
		box-shadow: 0 0 0 0 rgba(204,32,40,0.4);
	}
	
	50% {
		box-shadow: 0 0 0 8px rgba(204,32,40,0);
	}
}

/* 3. ShinyText — ชื่อบทความเรืองแสงนิด ๆ */
.entry-title,.wp-block-post-title {
	background: linear-gradient(120deg,#1a1a1a 40%,#CC2028 50%,#1a1a1a 60%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	animation: ilp-shine 4s linear infinite;
}

@keyframes ilp-shine {
	from {
		background-position: 200% center;
	}
	
	to {
		background-position: -200% center;
	}
}

/* 4. Selection + blockquote accent */
::selection {
	background: #CC2028;
	color: #fff;
}

blockquote {
	border-left-color: #CC2028 !important;
}

/* 5. Smooth image hover */
.entry-content img {
	transition: transform .3s ease, box-shadow .3s ease;
}

.entry-content img:hover {
	transform: scale(1.02);
	box-shadow: 0 8px 24px rgba(204,32,40,0.15);
}

/* ===== Fancy Buttons (added by DevOps) ===== */
/* ===== iLovePhone Academy — Fancy Buttons CI ===== */
/* วางใน WordPress: Appearance → Customize → Additional CSS */

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --gradient-angle-offset {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --gradient-percent {
  syntax: "<percentage>";
  initial-value: 5%;
  inherits: false;
}
@property --gradient-shine {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}

/* ShinyButton — ปุ่มเรืองแสงวิ่งรอบขอบ สีแดง CI */
.ilp-shiny-btn {
  --shiny-bg: #1a1818;
  --shiny-bg-subtle: #2a2a2a;
  --shiny-fg: #ffffff;
  --shiny-highlight: #CC2028;
  --shiny-highlight-subtle: #E84850;
  --shiny-duration: 3s;
  --shiny-shadow-size: 2px;
  --shiny-transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline-offset: 4px;
  padding: 1rem 2.5rem;
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: 360px;
  color: var(--shiny-fg);
  text-decoration: none !important;
  background: linear-gradient(var(--shiny-bg), var(--shiny-bg)) padding-box,
    conic-gradient(
      from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent,
      var(--shiny-highlight) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-highlight) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-bg-subtle);
  transition: var(--shiny-transition);
  transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine;
}
.ilp-shiny-btn::before,
.ilp-shiny-btn::after,
.ilp-shiny-btn span::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
}
.ilp-shiny-btn:active { translate: 0 1px; }
.ilp-shiny-btn::before {
  --size: calc(100% - var(--shiny-shadow-size) * 3);
  --position: 2px;
  --space: calc(var(--position) * 2);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle at var(--position) var(--position), white calc(var(--position) / 4), transparent 0) padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black);
  border-radius: inherit;
  opacity: 0.4;
  z-index: -1;
}
.ilp-shiny-btn::after {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--shiny-highlight), transparent);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.6;
}
.ilp-shiny-btn span { z-index: 1; }
.ilp-shiny-btn span::before {
  --size: calc(100% + 1rem);
  width: var(--size);
  height: var(--size);
  box-shadow: inset 0 -1ex 2rem 4px var(--shiny-highlight);
  opacity: 0;
  transition: opacity var(--shiny-transition);
  animation: calc(var(--shiny-duration) * 1.5) ilp-breathe linear infinite;
}
.ilp-shiny-btn,
.ilp-shiny-btn::before,
.ilp-shiny-btn::after {
  animation: ilp-gradient-angle var(--shiny-duration) linear infinite,
    ilp-gradient-angle calc(var(--shiny-duration) / 0.4) linear infinite reverse paused;
  animation-composition: add;
}
.ilp-shiny-btn:is(:hover, :focus-visible) {
  --gradient-percent: 20%;
  --gradient-angle-offset: 95deg;
  --gradient-shine: var(--shiny-highlight-subtle);
}
.ilp-shiny-btn:is(:hover, :focus-visible),
.ilp-shiny-btn:is(:hover, :focus-visible)::before,
.ilp-shiny-btn:is(:hover, :focus-visible)::after {
  animation-play-state: running;
}
.ilp-shiny-btn:is(:hover, :focus-visible) span::before { opacity: 1; }

@keyframes ilp-gradient-angle { to { --gradient-angle: 360deg; } }
@keyframes ilp-shimmer { to { rotate: 360deg; } }
@keyframes ilp-breathe { from, to { scale: 1; } 50% { scale: 1.2; } }

/* MetalButton — ปุ่มโลหะสี iLovePhone */
.ilp-metal-btn {
  position: relative;
  display: inline-flex;
  border-radius: 0.375rem;
  padding: 1.25px;
  background: linear-gradient(to bottom, #5A0008, #E84850);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  transition: all 250ms cubic-bezier(0.1, 0.4, 0.2, 1);
  cursor: pointer;
  text-decoration: none !important;
}
.ilp-metal-btn:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
.ilp-metal-btn:active { transform: translateY(2.5px) scale(0.99); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.ilp-metal-btn-inner {
  position: absolute;
  inset: 1px;
  border-radius: 0.5rem;
  background: linear-gradient(to bottom, #FFE0E1, #8A1019, #FFDCDD);
  transition: all 250ms cubic-bezier(0.1, 0.4, 0.2, 1);
}
.ilp-metal-btn:hover .ilp-metal-btn-inner { filter: brightness(1.05); }
.ilp-metal-btn-face {
  position: relative;
  z-index: 10;
  margin: 1px;
  display: inline-flex;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.375rem;
  padding: 0.5rem 1.5rem;
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 600;
  color: white !important;
  text-shadow: 0 -1px 0 rgb(100 10 16 / 100%);
  background: linear-gradient(to bottom, #E84850, #CC2028);
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 250ms cubic-bezier(0.1, 0.4, 0.2, 1);
}
.ilp-metal-btn:active .ilp-metal-btn-face { transform: scale(0.97); }
.ilp-metal-btn:hover .ilp-metal-btn-face { filter: brightness(1.02); }

/* ขนาด */
.ilp-btn-sm { padding: 0.625rem 1.5rem !important; font-size: 0.875rem !important; }
.ilp-btn-lg { padding: 1.25rem 3rem !important; font-size: 1.25rem !important; }
.ilp-metal-btn-face.ilp-btn-lg { height: 3.25rem; padding: 0.75rem 2rem; font-size: 1rem; }

/* จัดกลาง */
.ilp-btn-center { display: flex; justify-content: center; gap: 1rem; margin: 2rem 0; flex-wrap: wrap; }