/* ============================================================
   christopherfernandez.fi: site layer on top of the design system
   Load order: cf-design-system.css, cf-design-system-extensions.css, site.css
   ============================================================ */

/* --- Utilities ------------------------------------------------ */
.cf-mt-3 { margin-top: var(--cf-space-3); }
.cf-mt-4 { margin-top: var(--cf-space-4); }
.cf-mt-5 { margin-top: var(--cf-space-5); }
.cf-mt-6 { margin-top: var(--cf-space-6); }
.cf-mt-7 { margin-top: var(--cf-space-7); }
.cf-mt-8 { margin-top: var(--cf-space-8); }
.cf-muted { color: var(--cf-grey-600); }
.cf-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cf-skip {
  position: absolute; left: var(--cf-space-4); top: -100px; z-index: 200;
  background: var(--cf-black); color: var(--cf-white);
  padding: var(--cf-space-3) var(--cf-space-4);
  font-family: var(--cf-font-sans); font-size: 14px; text-decoration: none;
}
.cf-skip:focus { top: var(--cf-space-3); }

/* Content stays visible without JavaScript; animation only when JS runs */
html:not(.js) .cf-reveal { opacity: 1; }

/* --- Navigation ----------------------------------------------- */
.cf-nav { padding-left: 0; padding-right: 0; }
.cf-nav-inner {
  width: 100%;
  max-width: var(--cf-max-wide);
  margin: 0 auto;
  padding: 0 var(--cf-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cf-space-5);
}
.cf-nav-menu {
  display: flex;
  align-items: center;
  gap: var(--cf-space-7);
}
.cf-link-nav { font-size: 14px; text-decoration: none; }
.cf-link-nav[aria-current="page"] { color: var(--cf-black); font-weight: 600; }

.cf-lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  font-family: var(--cf-font-sans); font-size: 13px; letter-spacing: 0.06em;
}
.cf-lang-link {
  padding: 8px 6px; color: var(--cf-grey-600); text-decoration: none; line-height: 1;
  transition: color 150ms ease;
}
.cf-lang-link:hover { color: var(--cf-black); }
.cf-lang-link[aria-current="true"] { color: var(--cf-black); font-weight: 600; }
.cf-lang-divider { color: var(--cf-grey-400); font-size: 11px; }

/* --- Hero ----------------------------------------------------- */
.cf-hero { padding: var(--cf-space-10) 0 var(--cf-space-9); }
.cf-hero-inner {
  display: grid; grid-template-columns: 3fr 2fr; gap: var(--cf-space-8);
  align-items: center; max-width: var(--cf-max-wide); margin: 0 auto;
  padding: 0 var(--cf-space-6);
}
.cf-hero-photo {
  position: relative; aspect-ratio: 4 / 5; background: var(--cf-grey-100); overflow: hidden;
}
.cf-hero-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block;
}
.cf-hero-photo::before {
  content: ''; position: absolute; top: 0; right: 0; width: 12px; height: 12px;
  background: var(--cf-amber); z-index: 1;
}
.cf-hero-ctas { display: flex; gap: var(--cf-space-4); margin-top: var(--cf-space-6); flex-wrap: wrap; }

/* --- Sections ------------------------------------------------- */
.cf-section-about { background: var(--cf-warm); padding: var(--cf-space-10) 0; }
.cf-about-inner { max-width: var(--cf-max-content); margin: 0 auto; padding: 0 var(--cf-space-6); }
.cf-section-writing { background: var(--cf-white); padding: var(--cf-space-10) 0; }
.cf-writing-inner { max-width: var(--cf-max-wide); margin: 0 auto; padding: 0 var(--cf-space-6); }
.cf-writing-footer { margin-top: var(--cf-space-7); text-align: center; }
.cf-section-contact { background: var(--cf-warm); padding: var(--cf-space-10) 0; }
.cf-contact-inner { max-width: var(--cf-max-content); margin: 0 auto; padding: 0 var(--cf-space-6); }
.cf-section-plain { background: var(--cf-white); padding: var(--cf-space-9) 0; }
.cf-section-tight { padding-top: var(--cf-space-8); padding-bottom: var(--cf-space-8); }

/* Sub page header */
.cf-page-head { padding: var(--cf-space-9) 0 var(--cf-space-7); }
.cf-page-inner { max-width: var(--cf-max-wide); margin: 0 auto; padding: 0 var(--cf-space-6); }
.cf-narrow { max-width: var(--cf-max-content); }
.cf-404 { min-height: 60vh; }

/* About page */
.cf-about-grid {
  max-width: var(--cf-max-wide);
  display: grid; grid-template-columns: 240px 1fr; gap: var(--cf-space-8); align-items: start;
}
.cf-about-text { max-width: var(--cf-max-content); }
.cf-about-text .cf-body + .cf-body { margin-top: var(--cf-space-4); }

/* Facts box */
.cf-facts {
  margin-top: var(--cf-space-5);
  border-top: 3px solid var(--cf-black);
  font-family: var(--cf-font-sans);
}
.cf-facts > div {
  display: grid; grid-template-columns: 160px 1fr; gap: var(--cf-space-4);
  padding: var(--cf-space-4) 0; border-bottom: var(--cf-border-base);
}
.cf-facts dt {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cf-grey-600);
  padding-top: 2px;
}
.cf-facts dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cf-grey-800); }

/* FAQ */
.cf-faq { margin-top: var(--cf-space-5); }
.cf-faq-item { padding: var(--cf-space-5) 0; border-bottom: var(--cf-border-base); }
.cf-faq-item:first-child { border-top: var(--cf-border-base); }
.cf-faq-item .cf-h3 { margin: 0; }
.cf-faq-item p { margin-top: var(--cf-space-2); font-size: 16px; line-height: 1.6; }

/* Contact */
.cf-contact-page { min-height: 60vh; padding-top: var(--cf-space-9); }
.cf-contact-links {
  margin-top: var(--cf-space-6); display: flex; flex-direction: column; gap: var(--cf-space-2);
  font-style: normal;
}
.cf-contact-link {
  display: flex; align-items: center; gap: var(--cf-space-3); min-height: 44px; margin: 0;
  font-family: var(--cf-font-sans); font-size: 16px; color: var(--cf-black); text-decoration: none;
  transition: color 150ms ease; overflow-wrap: anywhere;
}
a.cf-contact-link:hover { color: var(--cf-amber); }
.cf-contact-link-label {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cf-grey-600);
  font-family: var(--cf-font-sans); min-width: 88px; flex-shrink: 0;
}

/* Cards that are not links yet */
.cf-card-featured .cf-card-meta { color: var(--cf-grey-600); }

/* --- Footer --------------------------------------------------- */
.cf-footer { background: var(--cf-black); padding: var(--cf-space-7) 0; }
.cf-footer-inner {
  max-width: var(--cf-max-wide); margin: 0 auto; padding: 0 var(--cf-space-6);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--cf-space-4);
}
.cf-footer-copy { font-family: var(--cf-font-sans); font-size: 13px; color: var(--cf-grey-400); margin: 0; }
.cf-footer-links { display: flex; flex-wrap: wrap; gap: var(--cf-space-2) var(--cf-space-5); }
.cf-footer-link {
  font-family: var(--cf-font-sans); font-size: 13px; color: var(--cf-grey-400); text-decoration: none;
  padding: 8px 0; transition: color 150ms ease;
}
.cf-footer-link:hover { color: var(--cf-white); }

/* --- Focus ---------------------------------------------------- */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--cf-amber); outline-offset: 3px;
}

/* --- Mobile --------------------------------------------------- */
@media (max-width: 768px) {
  .cf-nav-inner { padding: 0 var(--cf-space-5); }
  .js .cf-nav-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cf-white); border-bottom: var(--cf-border-base);
    flex-direction: column; align-items: flex-start; gap: var(--cf-space-4);
    padding: var(--cf-space-5);
  }
  .js .cf-nav-menu.open { display: flex; }
  .cf-nav-menu .cf-nav-links {
    display: flex; position: static; flex-direction: column; align-items: flex-start;
    padding: 0; border: 0; gap: 0; width: 100%;
  }
  .cf-nav-menu .cf-nav-links a { display: block; padding: 10px 0; font-size: 16px; }
  html:not(.js) .cf-nav-toggle { display: none; }
  html:not(.js) .cf-nav-inner { flex-wrap: wrap; }
  html:not(.js) .cf-nav-menu { width: 100%; justify-content: space-between; }
  html:not(.js) .cf-nav-menu .cf-nav-links { flex-direction: row; gap: var(--cf-space-4); width: auto; }

  .cf-hero { padding: var(--cf-space-6) 0 var(--cf-space-8); }
  .cf-hero-inner { grid-template-columns: 1fr; gap: var(--cf-space-6); padding: 0 var(--cf-space-5); }
  .cf-hero-photo { aspect-ratio: 4 / 3; order: -1; }
  .cf-section-about, .cf-section-writing, .cf-section-contact { padding: var(--cf-space-8) 0; }
  .cf-section-plain { padding: var(--cf-space-7) 0; }
  .cf-about-inner, .cf-writing-inner, .cf-contact-inner, .cf-page-inner { padding: 0 var(--cf-space-5); }
  .cf-page-head { padding: var(--cf-space-7) 0 var(--cf-space-5); }
  .cf-about-grid { grid-template-columns: 1fr; gap: var(--cf-space-6); }
  .cf-about-photo { max-width: 200px; }
  .cf-facts > div { grid-template-columns: 1fr; gap: var(--cf-space-1); }
  .cf-footer-inner { flex-direction: column; align-items: flex-start; padding: 0 var(--cf-space-5); }
}
@media (max-width: 480px) {
  .cf-hero-ctas { flex-direction: column; }
  .cf-hero-ctas .cf-btn { width: 100%; text-align: center; }
  .cf-contact-link { flex-wrap: wrap; gap: 0 var(--cf-space-3); }
}

/* --- Rhythm fixes --------------------------------------------- */
.cf-section-about .cf-body + .cf-body,
.cf-about-text .cf-body + .cf-body { margin-top: var(--cf-space-4); }
.cf-section-about .cf-btn-ghost,
.cf-section-contact .cf-btn-ghost { display: inline-block; margin-top: var(--cf-space-6); }
.cf-card-featured .cf-card-category { margin-top: var(--cf-space-3); }
.cf-card-featured .cf-card-title { margin-top: var(--cf-space-2); }
.cf-card-featured .cf-card-excerpt { margin-top: var(--cf-space-3); }
.cf-card-featured .cf-card-meta { margin-top: var(--cf-space-3); }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
@media (max-width: 480px) {
  .cf-contact-link { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 0; padding: var(--cf-space-2) 0; }
}
main { display: flex; flex-direction: column; }
main > section:last-child { flex: 1 0 auto; }