/* Shared by every page: fonts, the two looks, links and focus, the header and footer, and buttons.
   Values come from the approved mockups in docs/design. */

@font-face {
  font-family: Archivo;
  src: url("/assets/fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  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: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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: Figtree;
  src: url("/assets/fonts/figtree-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  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;
}

/* Page: slate behind everything, as in the mockups, and the look's own background on the body. */
:root {
  --archivo: Archivo, "Arial Narrow", sans-serif;
  --bricolage: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
}

html {
  background: #263236;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #F5F7F6;
  color: #22272B;
  font-family: Figtree, ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

body.look-company {
  background: #E8ECEC;
}

/* On a short page the main content grows, so the footer sits at the bottom of the window. */
main { flex: 1 0 auto; }

[hidden] {
  display: none !important;
}

.wrap {
  max-width: 1168px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* Links, focus and form details */
a { color: #0F5C63; text-underline-offset: 3px; }
a:hover { color: #0B4E54; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #0F5C63; outline-offset: 3px; }
.on-dark a { color: #9CC8C2; }
.on-dark a:hover { color: #F5F7F6; }
.on-dark a:focus-visible, .on-dark button:focus-visible, .on-dark input:focus-visible { outline-color: #F6C744; }
input::placeholder { color: #6B757D; }
button:hover { filter: brightness(0.95); }

.skip-link {
  position: absolute;
  top: -200px;
  left: 16px;
  z-index: 10;
  padding: 12px 18px;
  border-radius: 8px;
  background: #0F5C63;
  font-weight: 700;
  text-decoration: none;
}

.skip-link, .skip-link:hover { color: #FFFFFF; }
.skip-link:focus { top: 12px; }

/* Header */
.site-header {
  width: 100%;
  max-width: 1168px;
  margin: 0 auto;
  padding: 16px 24px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  text-decoration: none;
}

.brand, .brand:hover { color: #22272B; }
.brand svg { display: block; flex: none; }

.brand-name {
  font-family: var(--archivo);
  font-stretch: 80%;
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
}

.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; font-size: 16px; }
.site-nav a { display: inline-block; padding: 10px 0; border-bottom: 2px solid transparent; color: #22272B; text-decoration: none; font-weight: 600; }
.site-nav a:hover { color: #0F5C63; border-bottom-color: #0F5C63; }
.site-nav a[aria-current="page"] { color: #0F5C63; border-bottom-color: #0F5C63; }

/* fermozi.com's brand: the app's name in Bricolage Grotesque, as the app's page sets its headings,
   until W6 brings the app's wordmark. */
.brand-app .brand-name { font-family: var(--bricolage); font-stretch: normal; font-size: 26px; letter-spacing: -0.02em; }

/* Footer */
.site-footer { background: #263236; color: #F5F7F6; padding: 48px 0 44px; }

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px 48px;
  font-size: 15px;
}

.footer-about { flex: 1 1 280px; min-width: 0; }

.footer-brand {
  font-family: var(--archivo);
  font-stretch: 80%;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
}

.footer-brand-app { font-family: var(--bricolage); font-stretch: normal; letter-spacing: -0.01em; }
.footer-tagline { margin: 8px 0 0; color: #C3CDCF; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.footer-copy { margin-top: 28px; font-size: 14px; color: #C3CDCF; }

/* Below 600px, each footer link is at least 44px tall, so it's easy to tap. The links lose the
   gap between their rows, and the nav reaches 10px past its top and bottom, so the first row's
   words stay where they were. The email in the tagline keeps its place in the sentence, with an
   invisible band 44px tall to tap. */
@media (max-width: 599.98px) {
  .footer-nav { row-gap: 0; margin: -10px 0; }
  .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-tagline a { position: relative; }
  .footer-tagline a::after { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 44px; transform: translateY(-50%); }
}

/* Buttons that are links. Their colours hold on hover, as in the mockups. */
.btn-lagoon {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 26px;
  box-sizing: border-box;
  border-radius: 8px;
  background: #0F5C63;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
}

.btn-lagoon, .btn-lagoon:hover { color: #FFFFFF; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 24px;
  box-sizing: border-box;
  border: 2px solid #0F5C63;
  border-radius: 10px;
  text-decoration: none;
  font-family: var(--bricolage);
  font-weight: 700;
  font-size: 18px;
}

.btn-outline, .btn-outline:hover { color: #0F5C63; }

/* The app's name with its icon */
.pm-lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.pm-lockup svg { display: block; flex: none; }

.pm-lockup-name {
  font-family: var(--bricolage);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
}

/* A bracketed placeholder Ken still decides. Highlighted so previews make it obvious. */
mark.placeholder {
  border-radius: 2px;
  background: #FBE08A;
  color: #22272B;
  /* The shadow pads the highlight without taking room, so it never pushes past a line's end. */
  box-shadow: 0 0 0 3px #FBE08A;
  outline: 2px dashed #8A6100;
  outline-offset: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}