/*
Theme Name:  That's Adam
Theme URI:   https://thatsadam.dk
Author:      Adam Barnes
Description: Custom portfolio theme for thatsadam.dk
Version:     1.0.0
License:     Private
Text Domain: thats-adam
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,200;0,400;0,600;0,900;1,200;1,400;1,600;1,900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  background-color: var(--surface-dominant);
  color: var(--text-on-dark-primary);
  font-family: var(--font-primary);
  font-size: var(--text-m);
  font-weight: var(--fw-regular);
  line-height: var(--lh-xs);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

/* ── Site-wide thumbnail border ── */
.project-card__image,
.work-card__image,
.post-thumbnail,
.wp-post-image { border: 3px solid var(--surface-branding-primary-40); border-radius: var(--radius-xs); }
a { color: inherit; text-decoration: none; }

.container { max-width: 1440px; margin-inline: auto; padding-inline: var(--page-padding-x); }

.heading-xxxl { font-size: var(--text-5xl); font-weight: var(--fw-black); line-height: var(--lh-xxxl); letter-spacing: var(--ls-none); }
.heading-xxl  { font-size: var(--text-4xl); font-weight: var(--fw-black); line-height: var(--lh-xxl);  letter-spacing: var(--ls-none); }
.heading-xl   { font-size: var(--text-3xl); font-weight: var(--fw-black); line-height: var(--lh-xl);   letter-spacing: var(--ls-none); }
.heading-m    { font-size: var(--text-2xl); font-weight: var(--fw-black); line-height: var(--lh-m);    letter-spacing: var(--ls-none); }

.label-s  { font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: 1; letter-spacing: var(--ls-label-s); text-transform: uppercase; color: var(--text-on-dark-secondary); }
.label-m  { font-size: var(--text-m);  font-weight: var(--fw-semibold); line-height: 1; letter-spacing: var(--ls-label-m); text-transform: uppercase; color: var(--text-on-dark-secondary); }
.label-xl { font-size: var(--text-xl); font-weight: var(--fw-semibold); line-height: 1; letter-spacing: var(--ls-label-xl); text-transform: uppercase; color: var(--text-on-dark-secondary); }

.body-m { font-size: var(--text-m); font-weight: var(--fw-regular); line-height: var(--lh-xs); color: var(--text-on-dark-tertiary); }
.body-l { font-size: var(--text-l); font-weight: var(--fw-regular); line-height: var(--lh-s);  color: var(--text-on-dark-tertiary); }

.text-primary   { color: var(--text-on-dark-primary); }
.text-secondary { color: var(--text-on-dark-secondary); }
.text-tertiary  { color: var(--text-on-dark-tertiary); }
.text-active    { color: var(--color-active-glow); text-shadow: var(--color-active-glow-shadow); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-primary); font-size: var(--text-m); font-weight: var(--fw-black);
  line-height: var(--lh-xs); padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-xxs); border: 1px solid transparent; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none; white-space: nowrap;
}

/* Primary */
.btn-primary { background: var(--surface-branding-primary); color: var(--text-on-dark-btn); min-width: 120px; height: 44px; }
.btn-primary:hover { background: var(--surface-branding-secondary-hover); color: var(--text-on-dark-btn); }
.btn-primary:focus-visible { background: var(--surface-branding-primary); border-color: var(--surface-branding-secondary-hover); color: var(--text-on-dark-btn); outline: none; }
.btn-primary:active { background: var(--color-active-glow); color: var(--text-on-dark-btn); box-shadow: 0 0 4px var(--color-active-glow); }
.btn-primary:disabled, .btn-primary[disabled] { background: var(--text-on-dark-tertiary); color: var(--text-on-dark-btn); cursor: not-allowed; }

/* Secondary */
.btn-secondary { background: transparent; color: var(--text-on-dark-secondary); border-color: var(--surface-branding-primary-60); min-width: 120px; height: 44px; }
.btn-secondary:hover { color: var(--surface-branding-secondary-hover); border-color: var(--surface-branding-secondary-hover); }
.btn-secondary:focus-visible { background: var(--surface-branding-primary-25); border-color: var(--surface-branding-primary); color: var(--text-on-dark-secondary); outline: none; }
.btn-secondary:active { color: var(--color-active-glow); border-color: var(--color-active-glow); box-shadow: 0 0 4px var(--color-active-glow); }
.btn-secondary:disabled, .btn-secondary[disabled] { background: var(--ctrl-disabled-bg); border-color: var(--text-on-dark-tertiary); color: var(--text-on-dark-primary); cursor: not-allowed; }

/* Ghost / Link — black weight, px-8 py-4 */
.btn-ghost { background: transparent; color: var(--text-on-dark-primary); padding: var(--space-xxs) var(--space-xs); min-width: 0; height: auto; }
.btn-ghost:hover { color: var(--surface-branding-secondary-hover); border-bottom: 1px solid var(--surface-branding-secondary-hover); border-radius: 0; }
.btn-ghost:active { color: var(--color-active-glow); text-shadow: var(--color-active-glow-shadow); }

/* Small text — regular weight, py-4 only */
.btn-text { background: transparent; color: var(--text-on-dark-primary); font-weight: var(--fw-regular); padding: var(--space-xxs) 0; min-width: 0; height: auto; border-radius: 0; }
.btn-text:hover { color: var(--surface-branding-secondary-hover); border-bottom: 1px solid var(--surface-branding-secondary-hover); }
.btn-text:active { color: var(--color-active-glow); text-shadow: var(--color-active-glow-shadow); }
.btn-text--active { color: var(--color-active-glow); text-shadow: var(--color-active-glow-shadow); }
.btn-text--active:hover { color: var(--color-active-glow); border-bottom: none; }

/* Large text — extralight 200, p-xs all sides, hover → #f6ffcc + border-bottom */
.btn-large-text { background: transparent; color: var(--text-on-dark-primary); font-size: var(--text-2xl); font-weight: var(--fw-extralight); padding: var(--space-xs); min-width: 0; height: auto; line-height: var(--lh-m); }
.btn-large-text:hover { color: var(--surface-branding-secondary-hover); border-bottom: 1px solid var(--surface-branding-secondary-hover); border-radius: 0; }
.btn-large-text--active, .btn-large-text--active:hover { color: var(--color-active-glow); text-shadow: var(--color-active-glow-shadow); border-bottom: none; }

.divider { width: 100%; height: 1px; background: var(--surface-branding-primary-30); border: none; }

/* ── Responsive base ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .heading-xxxl { font-size: var(--text-4xl); line-height: var(--lh-xxl); }
  .heading-xxl  { font-size: var(--text-3xl); line-height: var(--lh-xl); }
  .heading-xl   { font-size: var(--text-2xl); line-height: var(--lh-m); }
  .heading-m    { font-size: var(--text-xl);  line-height: var(--lh-m); }
}
@media (max-width: 480px) {
  .heading-xxxl { font-size: var(--text-3xl); line-height: var(--lh-xl); }
  .heading-xxl  { font-size: var(--text-2xl); line-height: var(--lh-m); }
  .heading-xl   { font-size: var(--text-xl);  line-height: var(--lh-m); }
  .heading-m    { font-size: var(--text-l);   line-height: var(--lh-s); }
  .body-l       { font-size: var(--text-m);   line-height: var(--lh-xs); }
}