/* ==========================================================================
   Layout — Design tokens, reset, grid, base typography
   Ported from Ghost theme SCSS (settings, generic, objects, elements)
   ========================================================================== */

/* --- Design Tokens --- */

:root {
  /* Colors */
  --color-text-primary:   #000C2D;
  --color-text-secondary: #687385;
  --color-text-white:     #FFFFFF;
  --color-text-error:     #A01F1F;
  --color-text-success:   #085E38;

  --color-background-primary:   #F5F7F9;
  --color-background-secondary: #FFFFFF;
  --color-background-info:      #F3F6FF;
  --color-background-success:   #ECFDF5;
  --color-background-warning:   #FFFAF2;
  --color-background-danger:    #FDF4F4;

  --color-border-primary:  #DFE3E9;
  --color-border-info:     #3366FF;
  --color-border-success:  #52BD95;
  --color-border-warning:  #FFB020;
  --color-border-danger:   #D14343;

  --ghost-accent-color: #1a1a2e;

  --color-text-button: var(--color-text-white);
  --color-background-button: var(--ghost-accent-color);

  /* Spacing (8pt grid) */
  --space-2:     2px;
  --space-4:     4px;
  --space-8:     8px;
  --space-12:   12px;
  --space-16:   16px;
  --space-20:   20px;
  --space-24:   24px;
  --space-32:   32px;
  --space-40:   40px;
  --space-48:   48px;
  --space-56:   56px;
  --space-64:   64px;
  --space-72:   72px;
  --space-80:   80px;
  --space-96:   96px;
  --space-128: 128px;
  --space-160: 160px;

  /* Grid */
  --grid-width: 1142px;
  --grid-outer-gutter: var(--space-16);
  --grid-column-medium-gutter: var(--space-16);
  --grid-column-large-gutter: var(--space-24);

  /* Global */
  --global-transition: 500ms;
  --global-faster-transition: .26s;
  --global-border-radius: var(--space-8);
  --global-letter-spacing: .5px;
}


/* --- Reset --- */

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

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, figure, figcaption, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }


/* --- Base Typography --- */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-background-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

h1 { font-size: 40px; line-height: 48px; }
h2 { font-size: 32px; line-height: 40px; }
h3 { font-size: 24px; line-height: 32px; }
h4 { font-size: 20px; line-height: 24px; }


/* --- Sticky Footer --- */

.c-site-container {
  display: flex;
  min-height: 100vh;
  position: relative;
  flex-direction: column;
}

.c-site-container .o-wrapper { flex: 1 0 auto; }


/* --- Grid --- */

.o-wrapper {
  padding-top: var(--space-40);
  padding-bottom: var(--space-40);
}

.o-grid {
  margin: 0 auto;
  max-width: var(--grid-width);
  padding: 0 var(--grid-outer-gutter);
}

@media (min-width: 640px) {
  .o-grid {
    display: flex;
    flex-wrap: wrap;
  }
}

.o-grid__col {
  width: 100%;
}

@media (min-width: 640px) {
  .o-grid__col {
    flex-grow: 1;
    padding-right: var(--grid-column-medium-gutter);
    padding-left: var(--grid-column-medium-gutter);
  }
}

@media (min-width: 1024px) {
  .o-grid__col {
    padding-right: var(--grid-column-large-gutter);
    padding-left: var(--grid-column-large-gutter);
  }
}

.o-grid__col--center {
  max-width: 780px;
  margin: 0 auto;
}


/* --- Header --- */

.c-header {
  position: relative;
  padding: var(--space-20) 0;
  box-shadow: 0 .5px 0 0 var(--color-border-primary);
  background-color: var(--color-background-secondary);
}

.c-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* --- Logo --- */

.c-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.c-logo__image {
  max-height: 40px;
  width: auto;
}

.c-logo__text {
  font-size: 20px;
  font-weight: 900;
}


/* --- Navigation --- */

.c-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .c-nav-toggle { display: none; }
}

.c-nav-toggle__icon,
.c-nav-toggle__icon::before,
.c-nav-toggle__icon::after {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--color-text-primary);
  transition: all var(--global-faster-transition);
}

.c-nav-toggle__icon { position: relative; }
.c-nav-toggle__icon::before,
.c-nav-toggle__icon::after {
  content: '';
  position: absolute;
  left: 0;
}
.c-nav-toggle__icon::before { top: -6px; }
.c-nav-toggle__icon::after { top: 6px; }

.c-nav-toggle--close .c-nav-toggle__icon { background-color: transparent; }
.c-nav-toggle--close .c-nav-toggle__icon::before { top: 0; transform: rotate(45deg); }
.c-nav-toggle--close .c-nav-toggle__icon::after { top: 0; transform: rotate(-45deg); }

.c-nav-wrap {
  visibility: hidden;
  position: fixed;
  top: 0; bottom: 0; right: 0; left: 0;
  z-index: 10;
  width: 100%;
  height: 100vh;
  padding-top: var(--space-72);
  background-color: var(--color-background-primary);
  transform: scale(.96);
  display: flex;
  align-items: center;
  flex-direction: column;
}

.c-nav-wrap.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: all calc(var(--global-transition) / 2) cubic-bezier(.694, 0, .335, 1);
}

@media (min-width: 1024px) {
  .c-nav-wrap {
    visibility: visible;
    position: static;
    width: auto;
    height: auto;
    padding-top: 0;
    background-color: transparent;
    transform: none;
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0;
  }
}

.c-nav {
  width: 100%;
  padding-left: var(--space-32);
  padding-right: var(--space-32);
}

@media (min-width: 1024px) {
  .c-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    width: auto;
    padding: 0;
    min-width: 0;
  }

  .c-nav--left { justify-content: end; }
}

.c-nav__item {
  margin-bottom: var(--space-8);
}

@media (min-width: 1024px) {
  .c-nav__item {
    margin-bottom: 0;
    margin-left: var(--space-16);
  }
}

.c-nav__link {
  font-size: 13px;
  line-height: 22px;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--global-faster-transition);
}

.c-nav__link:hover {
  color: var(--ghost-accent-color);
}


/* --- Footer --- */

.c-footer {
  padding: var(--space-40) 0;
  margin-top: var(--space-40);
  background-color: var(--color-background-secondary);
  box-shadow: 0 0 0 .5px var(--color-border-primary);
}

@media (min-width: 1024px) {
  .c-footer { padding-top: var(--space-80); }
}

.c-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

@media (min-width: 640px) {
  .c-footer__inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

.c-footer__description {
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 22px;
  max-width: 400px;
}

.c-footer__copyright {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 14px;
  padding-top: var(--space-16);
  margin-top: var(--space-32);
  border-top: .5px solid var(--color-border-primary);
}

.c-footer-list a {
  display: block;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  transition: color var(--global-faster-transition) ease-in-out;
}

.c-footer-list a:hover {
  color: var(--ghost-accent-color);
}