/* =====================================================================
   Etherion: layout & alignment layer (v1.1)
   Loaded last. Everything here is driven by variables so it can be tuned
   from Ghost Admin (Design > Customize, or Settings > Code injection).

   Variables (override in :root via Code injection):
     --eth-wrap          page container width            (default 72rem)
     --eth-measure       article text column width       (default 44rem)
     --eth-wide          wide images / tables / embeds   (default 64rem)
     --eth-hero-measure  article headline width          (default 48rem)
     --eth-hero-gap      space under hero, above text    (default 2.5rem)
     --eth-radius        image / card corner radius      (default 1rem)

   Per-post / per-page switches (internal tags, add in the post settings):
     #center  centre this article        #left      force left alignment
     #wide    wider text column          #narrow    narrower text column
     #standard  normal width
   Site-wide defaults: the page with URL "layout-settings" (tags #center,
   #wide, #narrow on that page apply to every post and text page).
   ===================================================================== */

:root {
  --eth-wrap: 72rem;
  --eth-measure: 44rem;
  --eth-wide: 64rem;
  --eth-hero-measure: 48rem;
  --eth-hero-gap: 2.5rem;
  --eth-radius: 1rem;
}

/* ---------- 1. Header and footer share the page's left/right edges ---------- */
.container-wide { max-width: var(--eth-wrap); }
header .container-wide nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}
header .container-wide nav > a:first-child { justify-self: start; }
header .container-wide nav > .md\:flex:nth-of-type(1) { justify-self: center; }
header .container-wide nav > .md\:flex:nth-of-type(2) { justify-self: end; }
header .container-wide nav > .md\:hidden { justify-self: end; grid-column: 3; }
@media (max-width: 767px) {
  header .container-wide nav { display: flex; justify-content: space-between; }
}
footer .flex.space-x-3.p-2 { padding: .5rem 0; }
footer .footer-nav a { padding: 0; }

/* ---------- 2. Article (posts and pages): one left edge, one measure ---------- */
.eth-article .make-legal-hero .max-w-3xl { max-width: var(--eth-hero-measure); }
.eth-article .make-legal-hero { padding-bottom: 2.25rem; }
.eth-article .section.make-legal { padding-top: var(--eth-hero-gap); padding-bottom: 5rem; }
.eth-article .make-legal-hero h1 { text-wrap: balance; }

.eth-article .make-legal-prose { max-width: none; }
.eth-article .make-legal-prose > * { max-width: var(--eth-measure); }
.eth-article .make-legal-prose > :first-child { margin-top: 0; }

.eth-article .eth-post-image {
  display: block;
  width: 100%;
  max-width: var(--eth-wide);
  height: auto;
  margin: 0 0 3rem;
  border-radius: var(--eth-radius);
}

/* Editor content: restore what the CSS reset removed */
.eth-article .make-legal-prose h2 { font-size: 1.6rem; line-height: 1.25; margin: 2.75rem 0 .9rem; }
.eth-article .make-legal-prose h3 { font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; color: var(--make-text); font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; margin: 2rem 0 .6rem; }
.eth-article .make-legal-prose h4 { color: var(--make-text); font-size: 1rem; font-weight: 600; margin: 1.5rem 0 .5rem; }
.eth-article .make-legal-prose p { margin: 0 0 1.15rem; }
.eth-article .make-legal-prose ul { list-style: disc; padding-left: 1.4rem; margin: 0 0 1.4rem; }
.eth-article .make-legal-prose ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 1.4rem; }
.eth-article .make-legal-prose li { padding-left: .25rem; margin: .45rem 0; color: var(--make-muted); font-size: 1.05rem; line-height: 1.75; }
.eth-article .make-legal-prose li::marker { color: var(--make-teal); }
.eth-article .make-legal-prose li > ul, .eth-article .make-legal-prose li > ol { margin: .4rem 0 .4rem; }
.eth-article .make-legal-prose em { font-style: italic; font-size: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
.eth-article .make-legal-prose blockquote {
  margin: 2rem 0;
  padding: .25rem 0 .25rem 1.4rem;
  border-left: 3px solid var(--make-teal);
  color: var(--make-text);
}
.eth-article .make-legal-prose blockquote p { color: var(--make-text); font-size: 1.2rem; line-height: 1.6; margin: 0 0 .6rem; }
.eth-article .make-legal-prose blockquote p:last-child { margin-bottom: 0; }
.eth-article .make-legal-prose hr { border: 0; border-top: 1px solid var(--make-line); margin: 2.5rem 0; }
.eth-article .make-legal-prose pre {
  background: var(--make-card); border: 1px solid var(--make-line); border-radius: .75rem;
  padding: 1rem 1.25rem; margin: 0 0 1.5rem; overflow-x: auto; font-size: .9rem; line-height: 1.6; color: var(--make-text);
}
.eth-article .make-legal-prose :not(pre) > code {
  background: var(--make-card); border: 1px solid var(--make-line); border-radius: .35rem;
  padding: .1rem .4rem; font-size: .88em; color: var(--make-text);
}
.eth-article .make-legal-prose img, .eth-article .make-legal-prose video { max-width: 100%; height: auto; border-radius: .75rem; }
.eth-article .make-legal-prose figure { margin: 2rem 0; }
.eth-article .make-legal-prose figcaption { margin-top: .65rem; font-size: .85rem; line-height: 1.5; color: var(--make-muted); text-align: left; }
.eth-article .make-legal-prose table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .95rem; }
.eth-article .make-legal-prose th, .eth-article .make-legal-prose td { text-align: left; padding: .65rem .9rem; border-bottom: 1px solid var(--make-line); color: var(--make-muted); }
.eth-article .make-legal-prose th { color: var(--make-text); font-weight: 600; }
.eth-article .make-legal-prose iframe { max-width: 100%; }

/* Wide / full-width editor cards: sized to the container, never the viewport,
   so nothing overflows or gets pushed off the left edge. */
.eth-article .gh-content .kg-width-wide,
.eth-article .gh-content .kg-width-full {
  position: static; left: auto; right: auto; transform: none; min-width: 0;
  width: 100%; margin: 2rem 0;
}
.eth-article .gh-content .kg-width-wide { max-width: var(--eth-wide); }
.eth-article .gh-content .kg-width-full { max-width: 100%; }
.eth-article .gh-content .kg-width-wide img,
.eth-article .gh-content .kg-width-full img { width: 100%; }
.eth-article .gh-content .kg-card { margin-top: 2rem; margin-bottom: 2rem; }
.eth-article .gh-content .kg-button-card { display: flex; margin: 1.75rem 0; }
.eth-article .gh-content .kg-btn { border-radius: 999px; }
.eth-article .gh-content .kg-callout-card,
.eth-article .gh-content .kg-bookmark-container { border-color: var(--make-line); background: var(--make-card); }

/* Width: site-wide defaults from the "Layout settings" page, per-article tags win */
body.eth-g-hash-wide { --eth-measure: 56rem; --eth-hero-measure: 60rem; }
body.eth-g-hash-narrow { --eth-measure: 36rem; --eth-hero-measure: 40rem; }
.eth-article.tag-hash-wide { --eth-measure: 56rem; --eth-hero-measure: 60rem; }
.eth-article.tag-hash-narrow { --eth-measure: 36rem; --eth-hero-measure: 40rem; }
.eth-article.tag-hash-standard { --eth-measure: 44rem; --eth-hero-measure: 48rem; }

/* Centred articles: #center on the Layout settings page (all), or on one post */
:is(body.eth-g-hash-center .eth-article:not(.tag-hash-left), .eth-article.tag-hash-center) .make-legal-hero .max-w-3xl { margin-left: auto; margin-right: auto; text-align: center; }
:is(body.eth-g-hash-center .eth-article:not(.tag-hash-left), .eth-article.tag-hash-center) .make-legal-hero .make-eyebrow { justify-content: center; }
:is(body.eth-g-hash-center .eth-article:not(.tag-hash-left), .eth-article.tag-hash-center) .make-legal-prose > * { margin-left: auto; margin-right: auto; }
:is(body.eth-g-hash-center .eth-article:not(.tag-hash-left), .eth-article.tag-hash-center) .make-legal-prose .kg-width-wide,
:is(body.eth-g-hash-center .eth-article:not(.tag-hash-left), .eth-article.tag-hash-center) .make-legal-prose .kg-width-full { margin-left: auto; margin-right: auto; }
:is(body.eth-g-hash-center .eth-article:not(.tag-hash-left), .eth-article.tag-hash-center) .eth-post-image { margin-left: auto; margin-right: auto; }
:is(body.eth-g-hash-center .eth-article:not(.tag-hash-left), .eth-article.tag-hash-center) .make-legal-prose figcaption { text-align: center; }

/* ---------- 3. Insights list ---------- */
.eth-feed { align-items: stretch; gap: 1.25rem; }
.eth-feed .make-service-card { display: flex; flex-direction: column; height: 100%; }
.eth-feed .make-service-inner { display: flex; flex-direction: column; flex: 1; padding: 2rem 1.75rem; }
.eth-feed .make-service-card h3 { font-size: 1.3rem; line-height: 1.3; margin-bottom: .75rem; }
.eth-feed .make-service-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.eth-feed .make-service-card p { margin: 0; }
.eth-feed .make-service-top { margin-bottom: 1.25rem; }
.pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 2.5rem; }
.pagination .newer-posts { justify-self: start; grid-column: 1; }
.pagination .older-posts { justify-self: end; grid-column: 3; }
.pagination .page-number { grid-column: 2; text-align: center; font-size: .85rem; color: var(--make-muted); }
.pagination a { color: var(--make-teal); font-weight: 600; }
.pagination:not(:has(a)) { display: none; }
.make-legal-hero + .section { padding-top: 3.5rem; }

/* ---------- 4. Contact page and forms ---------- */
.make-contact-page .make-contact-grid { align-items: start; }
.make-form form { display: flex; flex-direction: column; gap: 1.25rem; }
.make-form form > .grid { gap: 1.25rem; }
.make-form label { display: flex; flex-direction: column; gap: .45rem; }
.make-form .space-y-5 > * + *, .make-form .space-y-2 > * + * { margin-top: 0 !important; }
.make-form button[type=submit] { margin-top: .25rem; }
@media (max-width: 639px) { .make-form { padding: 1.5rem; } }

/* ---------- 5. Service pages ---------- */
.eth-service .prose, .eth-service .prose p, .eth-service .prose li { color: var(--make-muted); }
.eth-service .prose h2, .eth-service .prose h3, .eth-service .prose strong { color: var(--make-text); }
.eth-service .prose ul { list-style: disc; padding-left: 1.4rem; }
.eth-service .prose ol { list-style: decimal; padding-left: 1.5rem; }
.eth-service .prose li::marker { color: var(--make-teal); }
.eth-service .section + .section { padding-top: 3.5rem; }

/* ---------- 6. Home and about ---------- */
.make-stat-value { white-space: nowrap; font-size: clamp(1.6rem, 3vw, 2.75rem); }
.make-scroll-cue { display: none; }
@media (min-width: 1024px) { .make-scroll-cue { display: flex; } }
.make-hero .make-session { margin-top: .25rem; }
.make-team-row .team-copy { align-self: center; }
@media (max-width: 767px) {
  .container, .container-wide { padding-left: 1.25rem; padding-right: 1.25rem; }
  .eth-article .section.make-legal { padding-bottom: 3.5rem; }
  .eth-article .make-legal-prose h2 { font-size: 1.4rem; }
}

/* Default article layout: centred frame, text stays left-aligned inside it.
   Opt out per article with #left, or site-wide with #left on the Layout settings page
   (then #frame on an article brings the centred frame back). */
:is(body:not(.eth-g-hash-left) .eth-article:not(.tag-hash-left), .eth-article.tag-hash-frame) .make-legal-hero .max-w-3xl { margin-left: auto; margin-right: auto; max-width: var(--eth-measure); }
:is(body:not(.eth-g-hash-left) .eth-article:not(.tag-hash-left), .eth-article.tag-hash-frame) .make-legal-prose > * { margin-left: auto; margin-right: auto; }
:is(body:not(.eth-g-hash-left) .eth-article:not(.tag-hash-left), .eth-article.tag-hash-frame) .eth-post-image,
:is(body:not(.eth-g-hash-left) .eth-article:not(.tag-hash-left), .eth-article.tag-hash-frame) .gh-content .kg-width-wide { margin-left: auto; margin-right: auto; }