/* =========================================================
   Site Presentation Layer
   This file is allowed to change.
   ========================================================= */

:root {
  --site-header-bg: none;
}

/* =========================================================
   3. Layout primitives
   ========================================================= */

.mlark-wrap {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   Full-width breakout helper
   ========================================================= */
.full-width {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.home-section .mlark-wrap {
	width: 100vw;
}
/* =========================================================
   Header / Footer
   ========================================================= */

.site-header,
.site-footer {
  background: #f5f5f5;
}

.site-header .site-header--hero {
  background: transparent;
}

.site-header-inner,
.site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
}

/* =========================================================
   Main Content Shell
   ========================================================= */

#content {
 position:relative;
	display: block;
	z-index:2;
}

/* =========================================================
   Sections (design system choice)
   ========================================================= */

.section,
.wp-block-group.is-style-section {
  padding: 4rem 1.5rem;
}

.wp-block-group.is-style-section-tight {
  padding: 2rem 1.5rem;
}

.wp-block-group.is-style-section-dark {
  padding: 4rem 1.5rem;
  background: #111;
  color: #fff;
}

.wp-block-group.is-style-section-dark a {
  color: #fff;
}

/* Optional separation between sections */
.section + .section,
.wp-block-group.is-style-section + .wp-block-group.is-style-section {
  border-top: 1px solid #eee;
}

/* =========================================================
   Section inner constraint
   ========================================================= */

.section > *,
.wp-block-group.is-style-section > * {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   WORDPRESS ARCHIVES & BLOG SYSTEM
   Clean unified structure
   ========================================================= */

/* ------------------------------------
   Shared Page Structure
------------------------------------ */

.archive-page
 {
  padding: 80px 0 120px;
}

.archive-header {
  margin-bottom: 60px;
}

.archive-title {
  font-size: 36px;
  margin-bottom: 12px;
}

.archive-description {
  color: #6b7280;
  max-width: 600px;
}

/* ------------------------------------
   ARCHIVE (List Layout)
   Categories / Tags / CPT archives
------------------------------------ */

.archive-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.archive-item-title {
  font-size: 22px;
  margin: 0 0 8px;
}

.archive-item-title a {
  text-decoration: none;
  color: #0b2e4f;
}

.archive-item-title a:hover {
  text-decoration: underline;
}

.archive-item-meta {
  font-size: 14px;
  color: #9ca3af;
}

.archive-pagination,
.blog-pagination {
  margin-top: 80px;
}

/* ------------------------------------
   BLOG HOME (Card Grid Layout)
------------------------------------ */

.blog-intro {
  margin-bottom: 80px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 40px;
	padding:10px;
}

.blog-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.12);
}

.blog-card-inner {
  display: block;
  text-decoration: none;
  color: inherit;
}

.blog-card-image img {
  width: 100%;
  height: auto;
  display: block;
}

.blog-card-content {
  padding: 24px;
}

.blog-card-title {
  font-size: 20px;
  margin: 0 0 8px;
  color: #0b2e4f;
}

.blog-card-date {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 12px;
}

.blog-card-excerpt {
  font-size: 15px;
  color: #374151;
}


/* ======================================
   SINGLE POST HERO CONTENT
====================================== */

.post-hero-content {
  padding: 120px 0 80px;
  color: #fff;
}



.post-title {
  font-size: 42px;
  line-height: 1.2;
  max-width: 800px;
  margin-bottom: 20px;
}

.post-breadcrumbs {
  font-size: 14px;
  margin-bottom: 20px;
  opacity: 0.85;
}

.post-breadcrumbs a {
  color: #fff;
  text-decoration: none;
}

.post-meta {
  font-size: 14px;
  opacity: 0.85;
  display: flex;
  gap: 20px;
}

/* BODY */

.post-body {
  padding: 80px 0 120px;
}

.post-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 60px;
}

.post-sidebar {
  position: sticky;
  top: 120px;
  align-self: start;
}

.post-toc {
  background: #f3f4f6;
  padding: 24px;
  border-radius: 12px;
  font-size: 14px;
}

.post-content {
  max-width: 720px;
}



.f-html {
	
	 background: transparent !important;
}



@media (max-width: 900px) {
.archive-hero {
	padding:10px;
}

	.post-sidebar {
		display:none;
	}
	.post-body {
		padding:0px;
	}
	
	.post-layout{
		display:block;
		padding:10px;
	}

}