/*
 * Tension v1 — Sections (architectural wireframe)
 * Hero, article prose, project grid, page layout, mobile nav drawer.
 * Most layout is composed via Tailwind utilities in templates; this file
 * covers components that need bespoke rules.
 */

/* ── Mobile nav drawer (functional JS hook) ── */
.lc-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 70;
  visibility: hidden;
  pointer-events: none;
}

.lc-mobile-nav.is-open {
  visibility: visible;
  pointer-events: auto;
}

.lc-mobile-nav__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lc-mobile-nav.is-open .lc-mobile-nav__overlay {
  opacity: 1;
}

.lc-mobile-nav__content {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(280px, 100%);
  background: var(--lc-surface-container-lowest);
  border-left: 1px solid var(--lc-border-divider);
  transform: translateX(100%);
  transition: transform 0.25s var(--lc-ease-out);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 1rem;
}

/* theme.js drives open/close via anime transform; when it clears inline
   styles (no-animation / reduced-motion path) fall back to this state. */
.lc-mobile-nav.is-open .lc-mobile-nav__content:not([style]) {
  transform: translateX(0);
}

.lc-mobile-nav__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--lc-border-divider);
  background: var(--lc-surface-container-low);
  color: var(--lc-on-surface);
  cursor: pointer;
  margin-left: auto;
  margin-bottom: 0.5rem;
}

.lc-mobile-nav__header {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--lc-border-divider);
}

.lc-mobile-nav__menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lc-mobile-nav__menu li {
  border-bottom: 1px solid var(--lc-border-divider-soft);
}

.lc-mobile-nav__menu > ul > li > a,
.lc-mobile-nav__menu > ul > li > .lc-mobile-menu__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0.5rem 0;
  font-family: var(--lc-font-ui);
  font-size: 0.9375rem;
  color: var(--lc-on-surface);
}

.lc-mobile-nav__menu > ul > li > a:hover,
.lc-mobile-nav__menu > ul > li > .lc-mobile-menu__trigger:hover {
  color: var(--lc-primary);
}

.lc-mobile-nav__menu > ul > li > a.lc-nav__link--current,
.lc-mobile-nav__menu .lc-nav__link--current {
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--lc-primary);
  padding-left: 0.75rem;
}

.lc-mobile-menu__submenu {
  display: none;
  padding-left: 1rem;
  padding-bottom: 0.5rem;
  overflow: hidden;
}

.lc-mobile-menu__submenu.is-open {
  display: block;
}

.lc-mobile-menu__submenu .menu-item a {
  display: block;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--lc-on-surface-variant);
}

.lc-mobile-menu__submenu .menu-item a:hover {
  color: var(--lc-primary);
}

.lc-mobile-menu__trigger .lc-nav__chevron {
  transition: transform 0.2s ease;
}

.lc-mobile-menu__trigger[aria-expanded="true"] .lc-nav__chevron {
  transform: rotate(180deg);
}

/* ── Article content prose ── */
.lc-article__header--ink {
  border-left: 2px solid var(--lc-primary);
  padding-left: var(--lc-unit-md);
}

.lc-article__cover {
  overflow: hidden;
  border-bottom: 1px solid var(--lc-outline-variant);
  background: var(--lc-surface-container-low);
}

.lc-article__cover img {
  display: block;
  width: 100%;
  height: min(24rem, 48vh);
  object-fit: cover;
}

.lc-adjacent-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lc-unit-sm);
  border-top: 1px solid var(--lc-outline-variant);
  padding-top: var(--lc-unit-md);
}

@media (min-width: 640px) {
  .lc-adjacent-nav {
    grid-template-columns: 1fr 1fr;
  }
}

.lc-adjacent-post {
  display: flex;
  min-width: 0;
  align-items: stretch;
  gap: var(--lc-unit-sm);
  border: 1px solid var(--lc-outline-variant);
  background: var(--lc-surface-container-lowest);
  text-decoration: none;
  transition: border-color var(--lc-transition);
}

.lc-adjacent-post:hover {
  border-color: var(--lc-primary);
}

.lc-adjacent-post--next {
  flex-direction: row-reverse;
  text-align: right;
}

.lc-adjacent-post--empty {
  display: none;
}

@media (min-width: 640px) {
  .lc-adjacent-post--empty {
    display: block;
    border: 0;
    background: transparent;
    pointer-events: none;
  }
}

.lc-adjacent-post__media {
  flex-shrink: 0;
  width: 6.5rem;
  min-height: 4.5rem;
  overflow: hidden;
  background: var(--lc-primary);
}

.lc-adjacent-post__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lc-adjacent-post__media--empty {
  background: var(--lc-surface-container-low);
}

.lc-adjacent-post__body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: var(--lc-unit-2xs);
  padding: var(--lc-unit-sm) var(--lc-unit-sm) var(--lc-unit-sm) 0;
}

.lc-adjacent-post--next .lc-adjacent-post__body {
  padding: var(--lc-unit-sm) 0 var(--lc-unit-sm) var(--lc-unit-sm);
}

.lc-adjacent-post__label {
  font-family: var(--lc-font-mono);
  font-size: var(--lc-text-caption);
  color: var(--lc-text-secondary);
}

.lc-adjacent-post__title {
  font-family: var(--lc-font-heading);
  font-size: var(--lc-text-headline-sm);
  font-weight: 600;
  color: var(--lc-on-surface);
  line-height: 1.3;
}

.lc-related-post__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  max-height: 12rem;
  background: var(--lc-surface-container-low);
  border-bottom: 1px solid var(--lc-outline-variant);
}

@media (min-width: 768px) {
  .lc-related-post__media {
    aspect-ratio: 16 / 10;
    max-height: none;
  }
}

.lc-related-post__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lc-article__content {
  color: var(--lc-on-surface);
}

.lc-article__content h2,
.lc-article__content h3,
.lc-article__content h4 {
  font-family: var(--lc-font-heading);
  font-weight: 600;
  margin: 2rem 0 0.875rem;
  line-height: 1.3;
  color: var(--lc-on-surface);
  letter-spacing: -0.02em;
}

.lc-article__content h2 { font-size: var(--lc-text-headline-md); }
.lc-article__content h3 { font-size: var(--lc-text-headline-sm); }
.lc-article__content h4 { font-size: var(--lc-text-body-lg); }

.lc-article__content p {
  margin: 0 0 1.25rem;
  font-size: var(--lc-text-body-lg);
  line-height: 1.8;
  color: var(--lc-on-surface);
  word-break: break-word;
}

.lc-article__content ul,
.lc-article__content ol {
  margin: 1rem 0 1.25rem;
  padding-left: 1.25rem;
}

.lc-article__content li {
  margin-bottom: 0.5rem;
  font-size: var(--lc-text-body-lg);
  line-height: 1.8;
  color: var(--lc-on-surface);
}

.lc-article__content a {
  color: var(--lc-primary);
  font-weight: 600;
}

.lc-article__content blockquote {
  margin: 1.5rem 0;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid var(--lc-primary);
  color: var(--lc-on-surface-variant);
}

.lc-article__content code:not(pre code) {
  font-family: var(--lc-font-mono);
  font-size: 0.875em;
  padding: 0.15em 0.45em;
  background: var(--lc-surface-container);
  color: var(--lc-on-surface);
}

.lc-article__content pre {
  margin: 1.5rem 0;
  overflow-x: auto;
}

.lc-article__content pre code {
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
}

.lc-article__content .wp-block-code:has(.lc-terminal--code),
.lc-article__content figure.wp-block-code:has(.lc-terminal--code) {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.lc-article__content .lc-terminal--code {
  margin: 1.5rem 0;
}

.lc-article__content .lc-terminal--code pre {
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--lc-terminal-bg);
  color: var(--lc-terminal-text);
  overflow-x: auto;
}

.lc-article__content .lc-terminal--code pre code {
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
}

.lc-article__content img {
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
}

.lc-article__content hr {
  margin: 2rem 0;
  border: none;
  border-top: 1px solid var(--lc-border-divider);
}

.lc-article__content table {
  display: block;
  width: fit-content;
  min-width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.lc-article__content th,
.lc-article__content td {
  padding: 0.625rem;
  border: 1px solid var(--lc-outline-variant);
  font-size: 0.875rem;
}

.lc-article__content th {
  background: var(--lc-surface-container);
  font-weight: 600;
}

/* Prose (page templates) */
.lc-prose {
  color: var(--lc-on-surface);
}

.lc-prose p {
  margin: 0 0 1.25rem;
  font-size: var(--lc-text-body-lg);
  line-height: 1.75;
  color: var(--lc-on-surface);
}

.lc-prose h2,
.lc-prose h3,
.lc-prose h4 {
  font-weight: 600;
  margin: 2rem 0 0.875rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.lc-prose ul,
.lc-prose ol {
  margin: 1rem 0 1.25rem;
  padding-left: 1.25rem;
}

.lc-prose a {
  color: var(--lc-primary);
  font-weight: 600;
}

.lc-prose table {
  display: block;
  width: fit-content;
  min-width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.lc-prose th,
.lc-prose td {
  padding: 0.625rem;
  border: 1px solid var(--lc-outline-variant);
}

.lc-prose th {
  background: var(--lc-surface-container);
  font-weight: 600;
}

.lc-prose code:not(pre code) {
  font-family: var(--lc-font-mono);
  font-size: 0.875em;
  padding: 0.15em 0.45em;
  background: var(--lc-surface-container);
}

.lc-prose pre {
  margin: 1.5rem 0;
  overflow-x: auto;
  padding: 1rem 1.25rem;
  background: var(--lc-surface-container-low);
  border: 1px solid var(--lc-border-divider);
  color: var(--lc-on-surface);
}

/* Nested section titles now share .lc-ink-bar; keep spacing hook for callers. */
.lc-section__header:not(.lc-ink-bar) {
  margin-bottom: 1.5rem;
}

.lc-section__title {
  font-family: var(--lc-font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lc-section__header--compact .lc-section__title,
.lc-ink-bar--compact .lc-ink-bar__title {
  font-size: var(--lc-text-headline-sm);
}

.lc-section__more {
  font-family: var(--lc-font-mono);
  font-size: 0.75rem;
  color: var(--lc-text-secondary);
  transition: color var(--lc-transition);
}

.lc-section__more:hover {
  color: var(--lc-primary);
}

.lc-section__more .lc-material-icon {
  font-size: 0.875rem;
  vertical-align: -2px;
}

/* ── Page header ── */
@media (max-width: 767px) {
  .lc-page-header__strip {
    margin-inline: calc(-1 * var(--lc-gutter-mobile));
  }
}

.lc-page-header__badge {
  display: inline-flex;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--lc-border-divider);
  background: var(--lc-surface-container-low);
  font-family: var(--lc-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lc-on-surface-variant);
}

.lc-page-header__count {
  font-family: var(--lc-font-mono);
  font-size: 0.75rem;
  color: var(--lc-text-secondary);
}

.lc-page-header__description {
  color: var(--lc-on-surface-variant);
}

/* ── Pagination ── */
.lc-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  border: 1px solid var(--lc-border-divider);
  background: var(--lc-surface-container-lowest);
  width: fit-content;
}

.lc-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.75rem;
  border-right: 1px solid var(--lc-border-divider);
  font-family: var(--lc-font-mono);
  font-size: 0.8125rem;
  color: var(--lc-on-surface-variant);
  transition: background var(--lc-transition), color var(--lc-transition);
}

.lc-pagination .page-numbers:last-child {
  border-right: none;
}

.lc-pagination .page-numbers.current {
  background: var(--lc-primary);
  color: var(--lc-on-primary);
}

.lc-pagination .page-numbers.current:hover {
  background: var(--lc-primary);
  color: var(--lc-on-primary);
}

.lc-pagination .page-numbers:not(.dots):hover {
  background: var(--lc-surface-container-low);
  color: var(--lc-primary);
}

/* ── Hero (front page) ── */
.lc-hero--home {
  position: relative;
}

.lc-hero__name {
  font-family: var(--lc-font-heading);
  font-size: clamp(3rem, 8vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.lc-hero__avatar-img {
  display: block;
  width: 5.5rem;
  height: 5.5rem;
  object-fit: cover;
}

@media (min-width: 768px) {
  .lc-hero__avatar-img {
    width: 8rem;
    height: 8rem;
  }
}

/* Blueprint corner ticks framing the hero content block */
.lc-hero__frame::before,
.lc-hero__frame::after {
  content: "";
  position: absolute;
  width: 0.875rem;
  height: 0.875rem;
  border-color: var(--lc-outline-variant);
  pointer-events: none;
}

.lc-hero__frame::before {
  top: 0;
  left: 0;
  border-top: 1px solid;
  border-left: 1px solid;
}

.lc-hero__frame::after {
  right: 0;
  bottom: 0;
  border-bottom: 1px solid;
  border-right: 1px solid;
}

/* Avatar invert on hover (wireframe: ink flip, no shadow) */
.lc-hero__avatar {
  transition: background-color var(--lc-transition), border-color var(--lc-transition);
}

.lc-hero__avatar img {
  transition: opacity var(--lc-transition), filter var(--lc-transition);
}

.lc-hero__avatar:hover {
  background-color: var(--lc-primary);
  border-color: var(--lc-primary);
}

.lc-hero__avatar:hover img {
  opacity: 0.85;
  filter: grayscale(1) invert(1) contrast(1.1);
}

/* Empty search state */
.lc-search-empty {
  border: 1px dashed var(--lc-border-divider);
  padding: 2rem;
  text-align: center;
}

/* Dot status marker used in wireframe project rows */
.lc-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--lc-status-running);
}

.lc-dot--developing { background: var(--lc-status-developing); }
.lc-dot--paused { background: var(--lc-status-paused); }

/* Terminal-style github widget (about page) */
.lc-terminal--github {
  border: 1px solid var(--lc-border-divider);
  background: var(--lc-surface-container-low);
}

/* ── Footer ── */
.lc-footer {
  border-top: 1px solid var(--lc-outline-variant);
  background: var(--lc-surface-container-low);
}

.lc-footer__inner {
  width: 100%;
  max-width: var(--lc-container-max);
  margin-inline: auto;
  padding: var(--lc-unit-lg) var(--lc-gutter-mobile) var(--lc-unit-md);
}

@media (min-width: 1024px) {
  .lc-footer__inner {
    padding: var(--lc-unit-lg) var(--lc-gutter-desktop) var(--lc-unit-md);
  }
}

.lc-footer__grid {
  display: grid;
  gap: 0;
  border-bottom: 1px solid var(--lc-outline-variant);
  padding-bottom: var(--lc-unit-md);
}

.lc-footer__grid > * + * {
  border-top: 1px solid var(--lc-outline-variant);
  padding-top: var(--lc-unit-md);
  margin-top: var(--lc-unit-md);
}

@media (min-width: 1024px) {
  .lc-footer__grid {
    display: flex;
    align-items: flex-start;
    padding-bottom: var(--lc-unit-lg);
  }

  .lc-footer__grid > * {
    padding-inline: var(--lc-unit-lg);
  }

  .lc-footer__grid > :first-child {
    padding-left: 0;
  }

  .lc-footer__grid > :last-child {
    padding-right: 0;
  }

  .lc-footer__grid > * + * {
    border-top: 0;
    border-left: 1px solid var(--lc-outline-variant);
    margin-top: 0;
    padding-top: 0;
  }
}

.lc-footer__brand {
  min-width: 0;
}

@media (min-width: 1024px) {
  .lc-footer__brand {
    flex: 1.4 1 12rem;
  }

  .lc-footer__connect {
    flex: 0 0 auto;
  }

  .lc-footer__links,
  .lc-footer__status {
    flex: 1 1 10rem;
    min-width: 0;
  }
}

.lc-footer__name {
  margin: 0;
  font-family: var(--lc-font-display);
  font-size: var(--lc-text-headline-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--lc-on-surface);
}

.lc-footer__desc {
  margin: var(--lc-unit-xs) 0 0;
  max-width: 22rem;
  font-family: var(--lc-font-body);
  font-size: var(--lc-text-body-md);
  line-height: 1.6;
  color: var(--lc-on-surface-variant);
}

.lc-footer__label {
  margin: 0 0 var(--lc-unit-sm);
  font-family: var(--lc-font-mono);
  font-size: var(--lc-text-label-md);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lc-outline);
}

.lc-footer__status .lc-footer__label {
  font-size: var(--lc-text-caption);
}

.lc-footer__link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lc-footer__link-list li + li {
  margin-top: 0.125rem;
}

.lc-footer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lc-unit-sm);
  padding: 0.3125rem 0;
  border-bottom: 1px solid var(--lc-outline-variant);
  font-family: var(--lc-font-mono);
  font-size: var(--lc-text-body-sm);
  letter-spacing: 0.04em;
  color: var(--lc-on-surface-variant);
  text-decoration: none;
  transition: color var(--lc-transition);
}

.lc-footer__link:hover {
  color: var(--lc-on-surface);
}

.lc-footer__link .lc-material-icon {
  font-size: 14px;
  color: var(--lc-outline);
}

.lc-footer__more {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  margin-top: var(--lc-unit-xs);
  font-family: var(--lc-font-mono);
  font-size: var(--lc-text-body-sm);
  letter-spacing: 0.04em;
  color: var(--lc-on-surface-variant);
  text-decoration: none;
  transition: color var(--lc-transition);
}

.lc-footer__more:hover {
  color: var(--lc-on-surface);
}

.lc-footer__more .lc-material-icon {
  font-size: 14px;
}

.lc-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.lc-footer__bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--lc-unit-xs);
  padding-top: var(--lc-unit-md);
  font-family: var(--lc-font-mono);
  font-size: var(--lc-text-label-md);
  letter-spacing: 0.04em;
  color: var(--lc-outline);
}

.lc-footer__bar p {
  margin: 0;
}

.lc-footer__heart {
  display: inline-flex;
  align-items: center;
  vertical-align: -0.15em;
  margin-inline: 0.125rem;
  color: var(--lc-on-surface-variant);
}

.lc-footer__heart svg {
  width: 0.875rem;
  height: 0.875rem;
}

.lc-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.lc-footer__legal a {
  color: inherit;
  text-decoration: none;
  transition: color var(--lc-transition);
}

.lc-footer__legal a:hover {
  color: var(--lc-primary);
}

.lc-footer__legal span {
  color: var(--lc-outline-variant);
}

@media (min-width: 640px) {
  .lc-footer__bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Footer CONNECT — icon buttons */
.lc-footer-connect {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.lc-footer-connect__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--lc-border-divider);
  background: var(--lc-surface-container-lowest);
  color: var(--lc-on-surface-variant);
  transition: color var(--lc-transition), border-color var(--lc-transition), background var(--lc-transition);
}

.lc-footer-connect__link:hover {
  color: var(--lc-primary);
  border-color: var(--lc-primary);
  background: var(--lc-surface-container-low);
}

.lc-footer-connect__link .lc-social-link__icon,
.lc-footer-connect__link svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ── Contact / guestbook form helper ── */
.lc-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1rem;
}

/* Content sits flush against header and footer for a continuous grid. */
.lc-default-content > main#primary {
  padding-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lc-mobile-nav__content,
  .lc-mobile-nav__overlay {
    transition: none;
  }
}