/*
 * Studija Luna 2026 - component styles.
 *
 * Mirrors the design-system components from the Claude Design handoff
 * (_ds_bundle.js: Button, Eyebrow, SectionHeader, IconCircle, Tag, ArchImage,
 * ServiceCard, BlogCard, Input). The React components kept hover/focus in
 * state; here the same values live in :hover / :focus rules.
 * Page layout itself stays inline in the templates, exactly as designed.
 */

/* ---- page-level styles from the design <helmet> ---- */
@keyframes lunaFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
body { margin: 0; background: #f7f4f0; }
a { color: #c89f7b; text-decoration: none; }
a:hover { color: #b5885f; }

html { scroll-padding-top: 88px; }
/* .sl-root clips decorative overflow with overflow-x:clip (Safari 16+); older Safari needs the viewport to do it. */
@supports not (overflow-x: clip) { html { overflow-x: hidden; } }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sl-skip-link:focus { position: fixed !important; left: 1rem; top: 1rem; z-index: 100; width: auto; height: auto; clip: auto; padding: 0.8rem 1.2rem; background: var(--luna-white); color: var(--luna-black); border-radius: var(--radius-pill); box-shadow: var(--shadow-soft); }

/* runtime-state wrappers (the design's <sc-if>); layout-neutral */
.sl-if { display: contents; }
.sl-if[hidden] { display: none !important; }

/* ---- Button ---- */
.sl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  box-sizing: border-box; margin: 0;
  font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: 0.8125rem;
  letter-spacing: var(--tracking-button); text-transform: uppercase; line-height: 1;
  padding: 0.9rem 2.2rem; border-radius: var(--radius-pill);
  border: 1px solid transparent; background: var(--button-bg); color: var(--text-on-accent);
  cursor: pointer; text-decoration: none; opacity: 1;
  transition: background var(--duration) var(--ease-soft), color var(--duration) var(--ease-soft), border-color var(--duration) var(--ease-soft), transform var(--duration-fast) var(--ease-soft);
}
.sl-btn--sm { padding: 0.62rem 1.5rem; }
.sl-btn--md { padding: 0.9rem 2.2rem; }
.sl-btn--lg { padding: 1.05rem 2.7rem; font-size: 0.875rem; }
.sl-btn:active { transform: scale(0.98); }
.sl-btn--primary, .sl-btn--primary:hover, .sl-btn--primary:focus { color: var(--text-on-accent); }
.sl-btn--primary:hover { background: var(--button-bg-hover); }
.sl-btn--outline { background: transparent; color: var(--luna-black); border-color: var(--luna-sand); }
.sl-btn--outline:hover { background: var(--luna-sand); color: var(--luna-white); border-color: var(--luna-sand); }
.sl-btn--soft { background: var(--luna-sand-12); color: var(--luna-black); }
.sl-btn--soft:hover { background: var(--luna-sand-25); color: var(--luna-black); }
.sl-btn.sl-btn--link { background: transparent; color: var(--luna-black); padding: 0.4rem 0; }
.sl-btn.sl-btn--link:hover { color: var(--accent-hover); }
.sl-btn__arrow { font-size: 1.1em; line-height: 1; transition: transform var(--duration) var(--ease-soft); }
.sl-btn:hover .sl-btn__arrow { transform: translateX(4px); }
.sl-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sl-btn[disabled], .sl-btn[aria-busy="true"] { opacity: 0.45; cursor: default; }

/* ---- Eyebrow ---- */
.sl-eyebrow {
  display: flex; align-items: center; gap: 0.9rem; justify-content: flex-start;
  font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent);
}
.sl-eyebrow--center { justify-content: center; }
.sl-eyebrow__line { width: 2.5rem; height: 1px; background: currentColor; opacity: 0.6; }

/* ---- SectionHeader ---- */
.sl-section-header { max-width: var(--container-narrow); margin: 0 auto; text-align: center; }
.sl-section-header__title {
  font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-h2);
  line-height: var(--leading-heading); color: var(--text-heading); margin: 0;
}
.sl-section-header__lead {
  font-family: var(--font-body); font-size: var(--text-lead); font-weight: var(--weight-light);
  line-height: var(--leading-body); color: var(--text-body); margin: 1.1rem 0 0;
}

/* ---- IconCircle ---- */
.sl-icon-circle {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-circle); background: var(--luna-sand); flex-shrink: 0;
}
.sl-icon-circle__img { width: 52%; height: 52%; object-fit: contain; }

/* ---- Tag ---- */
.sl-tag {
  display: inline-flex; align-items: center; padding: 0.4rem 1.1rem; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: var(--weight-medium); font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--border-accent); color: var(--luna-black);
}

/* ---- ArchImage ---- */
.sl-img { display: block; overflow: hidden; }
.sl-img--arch { border-radius: var(--radius-arch); }
.sl-img--circle { border-radius: var(--radius-circle); }
.sl-img--card { border-radius: var(--radius-card); }
.sl-img--shadow { box-shadow: var(--shadow-soft); }
.sl-img img {
  width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1);
  transition: transform var(--duration-slow) var(--ease-soft);
}
.sl-img--zoom:hover img { transform: scale(1.04); }

/* ---- ServiceCard ---- */
.sl-service-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem;
  padding: 2.2rem 2rem; background: var(--surface-card); border-radius: var(--radius-card);
  border: var(--border-hairline); box-shadow: var(--shadow-card); transform: none;
  transition: box-shadow var(--duration) var(--ease-soft), transform var(--duration) var(--ease-soft);
  text-decoration: none;
}
.sl-service-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.sl-service-card__title {
  font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-h3);
  color: var(--text-heading); line-height: 1.3; margin: 0;
}
.sl-service-card__text {
  font-family: var(--font-body); font-size: var(--text-small); line-height: var(--leading-body);
  color: var(--text-body); margin: 0; flex-grow: 1;
}
.sl-service-card__cta {
  font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: 0.8125rem;
  letter-spacing: var(--tracking-button); text-transform: uppercase; color: var(--luna-black);
  display: inline-flex; gap: 0.6em; align-items: center; transition: color var(--duration) var(--ease-soft);
}
.sl-service-card:hover .sl-service-card__cta { color: var(--accent-hover); }
.sl-service-card__arrow { transition: transform var(--duration) var(--ease-soft); }
.sl-service-card:hover .sl-service-card__arrow { transform: translateX(4px); }

/* ---- BlogCard ---- */
.sl-blog-card {
  display: flex; flex-direction: column; background: var(--surface-card); border-radius: var(--radius-card);
  overflow: hidden; border: var(--border-hairline); box-shadow: var(--shadow-card); transform: none;
  transition: box-shadow var(--duration) var(--ease-soft), transform var(--duration) var(--ease-soft);
  text-decoration: none;
}
.sl-blog-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.sl-blog-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.sl-blog-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1);
  transition: transform var(--duration-slow) var(--ease-soft);
}
.sl-blog-card:hover .sl-blog-card__media img { transform: scale(1.04); }
.sl-blog-card__body { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.6rem 1.7rem 1.9rem; align-items: flex-start; }
.sl-blog-card__meta { display: flex; gap: 0.8rem; align-items: center; }
.sl-blog-card__date {
  font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.08em;
  color: var(--text-muted); text-transform: uppercase;
}
.sl-blog-card__title {
  font-family: var(--font-display); font-weight: var(--weight-display); font-size: 1.35rem;
  line-height: 1.3; color: var(--text-heading); margin: 0; transition: color var(--duration) var(--ease-soft);
}
.sl-blog-card:hover .sl-blog-card__title { color: var(--accent-hover); }
.sl-blog-card__excerpt {
  font-family: var(--font-body); font-size: var(--text-small); line-height: var(--leading-body);
  color: var(--text-body); margin: 0;
}

/* ---- Input ---- */
.sl-field { display: flex; flex-direction: column; gap: 0.55rem; font-family: var(--font-body); }
.sl-field__label {
  font-size: var(--text-eyebrow); font-weight: var(--weight-semibold); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-heading);
}
.sl-field__req { color: var(--accent); }
.sl-input {
  width: 100%; box-sizing: border-box; margin: 0; padding: 0.95rem 1.3rem;
  font-family: var(--font-body); font-size: var(--text-body); color: var(--luna-black);
  background: var(--luna-white); border: var(--border-hairline); border-radius: var(--radius-pill);
  outline: none; box-shadow: none; resize: vertical;
  transition: border-color var(--duration-fast) var(--ease-soft), box-shadow var(--duration-fast) var(--ease-soft);
}
.sl-input--multiline { border-radius: var(--radius-soft); }
.sl-input:focus { border: 1px solid var(--luna-sand); box-shadow: var(--focus-ring); }

/* ---- form plumbing (not visible in the design) ---- */
.sl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.sl-form-error { margin: 0; font-size: var(--text-small); line-height: 1.6; color: #8a4a41; }

/* FAQ / nav focus rings for keyboard users */
[data-faq]:focus-visible, .sl-root a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---- generic WordPress content (policy pages, posts without a designed layout) ---- */
.sl-prose { font-size: 1.0625rem; line-height: 1.75; color: var(--text-body); }
.sl-prose > * { margin: 0 0 1.1rem; }
.sl-prose > *:last-child { margin-bottom: 0; }
.sl-prose h2, .sl-prose h3, .sl-prose h4 {
  font-family: var(--font-display); font-weight: var(--weight-display); color: var(--text-heading);
  line-height: 1.3; margin: 2.2rem 0 0.9rem;
}
.sl-prose h2 { font-size: var(--text-h3); }
.sl-prose h3 { font-size: 1.25rem; }
.sl-prose h4 { font-size: 1.1rem; }
.sl-prose > h2:first-child, .sl-prose > h3:first-child { margin-top: 0; }
.sl-prose ul, .sl-prose ol { padding-left: 1.3rem; }
.sl-prose li { margin: 0 0 0.45rem; }
.sl-prose li::marker { color: var(--luna-sand); }
.sl-prose a { color: var(--accent); font-weight: var(--weight-semibold); }
.sl-prose a:hover { color: var(--accent-hover); }
.sl-prose strong { color: var(--text-heading); font-weight: var(--weight-semibold); }
.sl-prose img { max-width: 100%; height: auto; border-radius: var(--radius-card); }
.sl-prose blockquote {
  margin: 1.6rem 0; padding: 1.4rem 1.8rem; background: var(--luna-sand-12); border-radius: var(--radius-card);
  font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--text-heading);
}
.sl-prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.sl-prose th, .sl-prose td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: var(--border-hairline); }