﻿/* ============================================================
   AUGESTO â€” BASE
   Body, typography, links, selection.
   ============================================================ */

html { font-size: 16px; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--clr-body);
  background-color: var(--clr-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Lenis */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

/* Selection */
::selection { background: var(--clr-accent); color: var(--clr-white); }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--clr-bg-alt); }
::-webkit-scrollbar-thumb { background: var(--clr-border-mid); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--clr-text-muted); }

/* â”€â”€ Headings â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--clr-heading);
  line-height: var(--lh-tight);
}

h1 {
  font-size: var(--fs-hero);
  font-weight: var(--fw-medium);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
}
h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-snug);
}
h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-snug);
}
h4 { font-size: var(--fs-lg);   font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-h5);   font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-h6);   font-weight: var(--fw-semibold); }

/* â”€â”€ Body text â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
p {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--clr-text-muted);
  max-width: 60ch;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}
a:hover { color: var(--clr-accent); }

/* â”€â”€ Section label chip â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
/* e.g. small section labels such as SERVICE or WHO WE ARE */
.section__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--clr-accent);
}

.section__label::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clr-accent);
  flex: 0 0 auto;
}

.section__title {
  font-size: var(--fs-2xl);
  color: var(--clr-text);
}

/* â”€â”€ Entry content (WP editor) â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.entry-content > * + * { margin-top: var(--sp-6); }
.entry-content h2, .entry-content h3 { margin-top: var(--sp-12); }
.entry-content a { text-decoration: underline; text-underline-offset: 3px; }
.entry-content ul, .entry-content ol { list-style: revert; padding-left: var(--sp-6); }

