/**
 * Website
 *
 * Layout shared by the website's pages (linkgif.garfaz.com): the header, the
 * main column and the extension banner.
 *
 * Loaded last on every website page, after the extension's stylesheets
 * (copied into the site at build time). design-system.css points Inter at the
 * extension's own files; the site serves its copy instead.
 *
 *   .web-header      The top bar. Children: __nav, __link (--current), __account, __email.
 *   .web-main        The page column. --wide for the focus mode.
 *   .web-banner      Shown without the extension. Child: __action.
 */

@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter.woff2');
}

:root {
  --linkgif-web-main-width: 720px;
  --linkgif-web-main-width-wide: 1200px;
}

/* ================================================
   Page
================================================ */

body {
  flex-direction: column;
  align-items: stretch;
  gap: var(--linkgif-space-6);
}

/* ================================================
   Header
================================================ */

.web-header {
  display: flex;
  align-items: center;
  gap: var(--linkgif-space-6);

  width: 100%;
  max-width: var(--linkgif-web-main-width-wide);
  margin-inline: auto;
}

.web-header .logo {
  margin-inline: 0;
}

.web-header__nav {
  display: flex;
  gap: var(--linkgif-space-4);
}

.web-header__link {
  color: var(--linkgif-text-muted);

  font-size: var(--linkgif-font-size-sm);
  font-weight: var(--linkgif-font-weight-medium);
  text-decoration: none;

  transition: color var(--linkgif-transition-fast);
}

.web-header__link--current {
  color: var(--linkgif-text-primary);
}

.web-header__link:hover {
  color: var(--linkgif-text-primary);
}

.web-header__link:focus-visible {
  border-radius: var(--linkgif-radius-sm);
  outline: var(--linkgif-focus-ring);
  outline-offset: var(--linkgif-focus-ring-offset);
}

.web-header__account {
  display: flex;
  align-items: center;
  gap: var(--linkgif-space-3);

  margin-inline-start: auto;

  font-size: var(--linkgif-font-size-sm);
}

.web-header__email {
  color: var(--linkgif-text-muted);
}

/* ================================================
   Main column
================================================ */

.web-main {
  max-width: var(--linkgif-web-main-width);
}

.web-main--wide {
  max-width: var(--linkgif-web-main-width-wide);
}

/* ================================================
   Extension banner
================================================ */

.web-banner {
  display: flex;
  flex-direction: column;
  gap: var(--linkgif-space-2);

  padding: var(--linkgif-space-4);

  border: var(--linkgif-border-width-base) var(--linkgif-border-style)
    var(--linkgif-border-color-accent);
  border-radius: var(--linkgif-radius-lg);
  background: var(--linkgif-background-card);
}

.web-banner__action {
  align-self: flex-start;

  width: auto;

  text-decoration: none;
}