/**
 * Component library styles
 * – Demo blocks and code snippets on the component-library page
 * – Optional overrides for custom elements (e.g. project-card, section-heading)
 */

/* ----- Component library page ----- */
.library-demo {
  background: rgba(11, 11, 53, 0.03);
  border: 1px solid rgba(11, 11, 53, 0.08);
  border-radius: 8px;
  padding: 24px;
  margin: 16px 0;
}

.library-code {
  background: #170636;
  color: #e8e8ed;
  padding: 20px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.library-code code {
  font-family:
    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
  white-space: pre;
}

/* Article template: optional date (e.g. for blog posts) */
.article-date {
  color: #595858;
  font-size: 14px;
  margin-top: 4px;
  margin-bottom: 0;
}

/* Blog post body: comfortable reading width */
.article-body {
  max-width: 720px;
}

.article-body h3 {
  margin-top: 32px;
  margin-bottom: 12px;
}

.article-body h3:first-child {
  margin-top: 0;
}

/* Article end: prev/next + footer as one block, no gap, no bottom margin */
.article-end {
  margin-bottom: 0;
  width: 100%;
  background-color: #170636;
}

.article-end-nav {
  padding: 0;
  border-bottom: 0.5px solid #fafafa;
}

/* Prev/next tiles: hover effect (purple cover slides up), same as Soniq Design System page */
.article-end-nav .linkblock {
  position: relative;
  overflow: hidden;
}

.article-end-nav .linkblock > *:not(.hovercover) {
  position: relative;
  z-index: 1;
}

@media screen and (min-width: 992px) {
  .article-end-nav .linkblock:first-child {
    align-items: flex-start;
    text-align: left;
    padding-left: max(var(--page-gutter), calc((100vw - 1140px) / 2));
    padding-right: 48px;
  }

  .article-end-nav .linkblock:last-child {
    align-items: flex-end;
    text-align: right;
    padding-left: 48px;
    padding-right: max(var(--page-gutter), calc((100vw - 1140px) / 2));
  }
}

.article-end-nav .linkblock .hovercover.backgroundinvert {
  top: 100%;
  transform: none;
  background-color: #270f52;
  z-index: 0;
  transition: top 0.35s ease;
}

.article-end-nav .linkblock:hover .hovercover.backgroundinvert {
  top: 0;
}

.article-end .article-end-footer {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  padding-top: 40px;
  padding-bottom: 40px;
}

@media (max-width: 991px) {
  .article-end .article-end-footer {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .article-end .article-end-footer {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

/* Footer tagline easter egg (mouse-follow tooltip), shared by <site-footer>
   and <article-end> across every page that loads this stylesheet. */
.footer .footer-tagline-wrap {
  position: relative;
  display: inline-block;
  cursor: default;
  user-select: none;
}

.footer .footer-tooltip {
  width: max-content;
  max-width: 90vw;
  opacity: 0;
  visibility: hidden;
  color: #0b0b35;
  letter-spacing: 0.05em;
  background-color: #fce3ff;
  border: 1px solid rgba(246, 176, 255, 0.55);
  border-radius: 8px;
  padding: 10px 16px 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 160%;
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 8px;
  z-index: 100;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
  white-space: nowrap;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  will-change: transform;
  transform-style: preserve-3d;
}

.footer .footer-tagline-wrap:hover .footer-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Homepage contact cards should align to the same content width as the nav. */
.is-home #contact .container.full.borderbottom.margintop {
  width: 100vw;
  max-width: none;
  margin-left: calc(-1 * var(--page-gutter));
  margin-right: calc(-1 * var(--page-gutter));
  justify-content: space-between;
}

.is-home #contact .linkblock {
  flex: 1 1 0;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

.is-home #contact .linkblock:first-child {
  padding-left: max(var(--page-gutter), calc((100vw - 1140px) / 2));
}

.is-home #contact .linkblock:last-child {
  padding-right: max(var(--page-gutter), calc((100vw - 1140px) / 2));
}

/* Shared horizontal gutters for nav and footer bars. */
:root {
  --page-gutter: 80px;
}

@media screen and (max-width: 991px) {
  :root {
    --page-gutter: 40px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --page-gutter: 24px;
  }
}

/* No space below the footer – remove section padding under article-end */
.section.project:has(.article-end) {
  padding-bottom: 0;
}

/* Optional: footer block at bottom of viewport when content is short */
body.has-article-end {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Normalize legacy 100vw behavior and keep both nav edges symmetric. */
.navbar {
  width: 100%;
  max-width: 100%;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

body.has-article-end .section.project {
  flex: 1;
  display: flex;
  flex-direction: column;
}

body.has-article-end .section.project .article-end {
  margin-top: 56px;
}

/* Footer bars should align to same gutters as navbar on all pages. */
.footer {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

.article-end .footer.dark.article-end-footer {
  padding-left: 0;
  padding-right: 0;
}

.article-end .footer.dark.article-end-footer .container._100.vertical_mobile {
  width: 100%;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 24px;
  color: #fafafa;
}

.footer-home {
  background-color: transparent;
  width: 100vw;
  max-width: 100vw;
  padding-left: 0;
  padding-right: 0;
}

.footer-home .container._100.vertical_mobile {
  width: calc(100vw - (2 * var(--page-gutter)));
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 24px;
  color: #fafafa;
}

/* Footer copy uses white, while keeping tooltip styling independent. */
.article-end
  .footer.dark.article-end-footer
  .container._100.vertical_mobile
  > div:first-child,
.footer-home .container._100.vertical_mobile > div:first-child,
.footer .footer-tagline-wrap > span:first-child {
  color: #fafafa;
}

@media screen and (min-width: 992px) {
  .article-end
    .footer.dark.article-end-footer
    .container._100.vertical_mobile
    > div:last-child,
  .footer-home .container._100.vertical_mobile > div:last-child {
    text-align: right;
    justify-self: end;
  }
}

@media screen and (max-width: 991px) {
  .article-end .footer.dark.article-end-footer,
  .footer-home {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
  }

  .article-end .footer.dark.article-end-footer .container._100.vertical_mobile,
  .footer-home .container._100.vertical_mobile {
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
  }
}

/* Legacy article pages still use a separate footer section after .section.project.
   Add breathing room exactly between content end and footer start. */
.section.project + .section.padding_none {
  margin-top: 56px;
}

/* Keep article nav CTA snapped to right edge. */
body.has-article-end .navbar .navmenu {
  margin-left: auto;
}

/* Align the CTA text edge with the shared content frame. */
@media screen and (min-width: 992px) {
  .navbar .navbutton,
  .navbar .navbutton.light {
    padding-right: 0;
  }
}

body.has-article-end .section.project > .container.vertical.spacemedium {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  margin-bottom: 12px;
}

body.has-article-end
  .section.project
  > .container.vertical.spacemedium
  > .w-layout-vflex {
  width: 100%;
}

body.has-article-end
  .section.project
  > .container.vertical.spacemedium
  > .imagewrap,
body.has-article-end
  .section.project
  > .container.vertical.spacemedium
  > .w-layout-vflex
  > .imagewrap {
  aspect-ratio: auto;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 16px;
}

/* Newest article pages render image inside <article-header>; tighten that block. */
body.has-article-end article-header {
  display: block;
}

body.has-article-end article-header .projectheader {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}

body.has-article-end article-header .w-layout-vflex {
  width: 100%;
}

body.has-article-end article-header .imagewrap {
  aspect-ratio: auto;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 16px;
}

/* Article tags should use the lighter pink treatment. */
body.has-article-end .tag.primary {
  background-color: #fce3ff;
  border: 0.5px solid rgba(246, 176, 255, 0.55);
}

/* Ensure custom elements don't break layout */
site-nav,
site-footer,
project-card,
section-heading,
highlight-block,
contact-link,
article-nav,
article-header,
article-end {
  display: block;
}

/* Article cursor – match homepage/emenin exactly: resting = dot + ring, same sizes and transitions. */
#article-cursor {
  right: auto;
  bottom: auto;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 9999;
}

/* 1. Resting state: same as homepage – inner dot 10px + outer ring 40px (emenin .innerdot and .outercircle) */
#article-cursor .innerdot {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  background-color: #f6b0ff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  justify-content: center;
  align-items: center;
  display: flex;
  transition:
    width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Outer circle: visible at rest (40px ring), same as homepage. Hidden on regular hover; used for tile hover. */
#article-cursor .outercircle {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(246, 176, 255, 0.5);
  background-color: transparent;
  transform: translate(-50%, -50%);
  justify-content: center;
  align-items: center;
  display: flex;
  opacity: 1;
  pointer-events: none;
  transition:
    width 0.2s cubic-bezier(0.23, 1, 0.32, 1),
    height 0.2s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 2. Regular hover (links): inner dot grows to 50px; hide ring so one circle grows (like homepage link hover) */
#article-cursor.cursor-hover .innerdot {
  width: 50px;
  height: 50px;
  transition:
    width 0.2s cubic-bezier(0.23, 1, 0.32, 1),
    height 0.2s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#article-cursor.cursor-hover .outercircle {
  opacity: 0;
}

#article-cursor.cursor-hover .tooltiplabel {
  opacity: 0;
  visibility: hidden;
}

/* 3. Footer tiles: same effect as article page “View Project” – solid circle 200px, text centered, 0.3s ease */
#article-cursor.cursor-hover-tile .outercircle {
  width: 160px !important;
  height: 160px !important;
  min-width: 160px;
  min-height: 160px;
  background-color: #f6b0ff !important;
  border: 1px solid rgba(246, 176, 255, 0.5);
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  z-index: 1;
  transition:
    width 0.2s cubic-bezier(0.23, 1, 0.32, 1),
    height 0.2s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#article-cursor.cursor-hover-tile .innerdot {
  opacity: 0;
}

#article-cursor.cursor-hover-tile .tooltiplabel {
  opacity: 1;
  visibility: visible;
  font-size: 16px;
  z-index: 2;
  transition:
    opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    visibility 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Tooltip label – same as emenin .tooltiplabel */
#article-cursor .tooltiplabel {
  opacity: 0;
  visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Syne, sans-serif;
  font-size: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #222020;
  pointer-events: none;
  transition:
    opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    visibility 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body.custom-cursor-active #article-cursor {
  cursor: none;
}

body.custom-cursor-active a[href],
body.custom-cursor-active button,
body.custom-cursor-active [role='button'] {
  cursor: none;
}

/* Override main stylesheet: cursor is hidden in media queries (display: none, z-index: -1000, .outercircle 0 size). Force article cursor to show. */
@media screen and (max-width: 991px) {
  #article-cursor {
    display: flex !important;
    z-index: 9999 !important;
    opacity: 1 !important;
    position: fixed !important;
  }
  #article-cursor.cursor-hover-tile .outercircle {
    width: 160px !important;
    height: 160px !important;
    min-width: 160px !important;
    min-height: 160px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
  }
}

@media screen and (max-width: 767px) {
  #article-cursor {
    display: flex !important;
    z-index: 9999 !important;
    position: fixed !important;
  }
}

@media screen and (max-width: 479px) {
  #article-cursor {
    display: flex !important;
    z-index: 9999 !important;
    position: fixed !important;
  }
}