/* ==========================================================================
   Can Go Digital — static site
   Design tokens mirror the previous WordPress theme (Twenty Twenty-Four),
   so the rendered result matches the original site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts (self-hosted, subset by unicode-range: only Latin loads for EN text)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/opensans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/opensans-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/opensans-var-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Cardo";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cardo-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cardo";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cardo-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cardo";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cardo-italic-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* colour */
  --color-base: #f9f9f9;
  --color-base-2: #ffffff;
  --color-contrast: #111111;
  --color-contrast-2: #636363;
  --color-contrast-3: #a4a4a4;
  --color-accent: #cfcabe;
  --color-linkedin: #0d66c2;

  /* type */
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-quote: "Cardo", Georgia, "Times New Roman", serif;

  --size-small: 0.9rem;
  --size-medium: 1.05rem;
  --size-large: clamp(1.39rem, 1.39rem + ((1vw - 0.2rem) * 0.767), 1.85rem);
  --size-x-large: clamp(1.85rem, 1.85rem + ((1vw - 0.2rem) * 1.083), 2.5rem);
  --size-xx-large: clamp(2.5rem, 2.5rem + ((1vw - 0.2rem) * 1.283), 3.27rem);
  --size-site-title: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.542), 1.2rem);

  /* space */
  --space-10: 1rem;
  --space-20: min(1.5rem, 2vw);
  --space-30: min(2.5rem, 3vw);
  --space-40: min(4rem, 5vw);
  --space-50: min(6.5rem, 8vw);
  --space-60: min(10.5rem, 13vw);
  --block-gap: 1.2rem;

  /* layout */
  --content-size: 620px;
  --wide-size: 1280px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-inline: var(--space-50);
  background-color: var(--color-base);
  color: var(--color-contrast);
  font-family: var(--font-body);
  font-size: var(--size-medium);
  font-weight: 300;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Matches the previous theme: links inherit the text colour and are
   underlined inside content, undecorated in navigation. */
a {
  color: var(--color-contrast);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-contrast);
  outline-offset: 3px;
  border-radius: 2px;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

strong {
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--color-contrast);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
}

h1 {
  font-size: var(--size-xx-large);
  line-height: 1.15;
}
h2 {
  font-size: var(--size-x-large);
}
h3 {
  font-size: var(--size-large);
}
h4 {
  font-size: clamp(1.1rem, 1.1rem + ((1vw - 0.2rem) * 0.767), 1.5rem);
}
h5 {
  font-size: var(--size-medium);
}
h6 {
  font-size: var(--size-small);
}

p,
blockquote,
figure {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding-inline-start: 1rem;
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.wide {
  max-width: var(--wide-size);
  margin-inline: auto;
}

.constrained {
  max-width: var(--content-size);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background-color: var(--color-base-2);
  color: var(--color-contrast);
  font-size: var(--size-small);
  text-decoration: none;
}

.skip-link:focus {
  left: var(--space-50);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  padding-block: var(--space-20);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem var(--space-30);
  flex-wrap: wrap;
}

.site-title {
  margin: 0;
  font-size: var(--size-site-title);
  font-weight: 600;
  line-height: 1.2;
}

.site-title a {
  text-decoration: none;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem var(--block-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  font-weight: 500;
  text-decoration: none;
}

.site-nav a:hover,
.site-title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   Main
   -------------------------------------------------------------------------- */
main {
  margin-block-start: var(--block-gap);
}

/* The block gap is added to both sides so the vertical rhythm matches the
   spacer blocks the original theme placed around the page title. */
.page-header {
  padding-block-start: calc(var(--space-50) + var(--block-gap));
  padding-block-end: calc(var(--space-30) + var(--block-gap));
}

.page-title {
  text-align: center;
}

/* Uniform block spacing, as in the original block theme. */
.content > * + * {
  margin-block-start: var(--block-gap);
}

.content a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.content a:hover {
  text-decoration: none;
}

/* Pull-quote — white card, italic serif */
.quote {
  padding: calc(var(--space-30) + 0.75rem);
  background-color: var(--color-base-2);
  border-radius: var(--space-20);
  font-family: var(--font-quote);
  font-size: var(--size-large);
  font-style: italic;
  line-height: 1.3;
}

.quote > * + * {
  margin-block-start: calc(var(--space-10) + 0.5rem);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  margin-block-start: var(--block-gap);
  padding-block: var(--space-40);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-20) var(--space-30);
  flex-wrap: wrap;
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem var(--block-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  font-weight: 500;
  text-decoration: none;
}

.footer-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  transition: opacity 0.15s ease;
}

.social a:hover {
  opacity: 0.7;
}

.social svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.social__linkedin {
  color: var(--color-linkedin);
}

.social__mail {
  color: var(--color-contrast);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.error-page {
  text-align: center;
}

.error-page .content {
  text-align: center;
}

/* --------------------------------------------------------------------------
   Narrow screens — stack the header and centre the menus
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .site-header__inner,
  .site-footer__inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  /* A 2x2 grid reads more deliberately than a 3+1 wrap. */
  .site-nav ul,
  .footer-nav ul {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 0.5rem var(--space-30);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}