/* Hjärnfokus — legal pages stylesheet
 *
 * Self-contained on purpose. The JKZ site's styles.css is ~1000 lines built for
 * a full marketing site (heroes, carousels, ambient glows); these four legal
 * pages need a nav bar and readable prose, so this is written to that scope
 * rather than copied and mostly overridden.
 *
 * Colours are the app's own, read from lib/styles.dart in the hjarnfokus repo,
 * not sampled from a screenshot:
 *
 *   kColorPrimary        #3EAFC1   teal, the app bar and brand colour
 *   kColorPrimaryLight   #2B9EB1
 *   kColorPrimaryMedium  #378591   body-ish teal used for headings in-app
 *   kColorSecondary      #FCE633   the yellow accent
 *   kColorReflection     #116370   deep teal
 *   kColorBlack          #333130   the app's near-black text colour
 *
 * The typeface is Roboto, which is what GoogleFonts.roboto() gives every text
 * style in the app. Loaded from Google Fonts with a system stack behind it, so
 * the page still renders correctly if that request is blocked.
 */

/* === TOKENS === */
:root {
  --bg:         #f2fafb;  /* a very light tint of the primary teal */
  --bg2:        #e4f4f7;
  --paper:      #ffffff;
  --ink:        #333130;  /* kColorBlack */
  --dim:        rgba(51,49,48,0.70);
  --faint:      rgba(51,49,48,0.48);
  --rule:       rgba(17,99,112,0.14);
  --card-b:     rgba(17,99,112,0.10);
  --primary:    #3EAFC1;  /* kColorPrimary */
  --primary-dk: #2B9EB1;  /* kColorPrimaryLight */
  --primary-md: #378591;  /* kColorPrimaryMedium */
  --deep:       #116370;  /* kColorReflection */
  --accent:     #FCE633;  /* kColorSecondary */
  --font:       'Roboto', 'Helvetica Neue', Helvetica, Arial, system-ui, -apple-system, sans-serif;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
}
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
hr { border: none; }

/* === LAYOUT === */
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.section { padding: 40px 24px 80px; }
.page-body { position: relative; z-index: 1; padding-top: 76px; }

/* === NAV ===
 * Solid teal rather than the translucent cream JKZ uses: it matches the app's
 * own app bar, which is a flat kColorPrimary. */
.hf-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--primary);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 6px 20px rgba(17,99,112,0.10);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 500; text-decoration: none;
  color: #ffffff; letter-spacing: 0.01em;
}
.nav-logo-img {
  width: 34px; height: 34px; border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(17,99,112,0.25);
}

/* === LEGAL CONTENT ===
 * The four legal pages carry their own copy of these rules in a <style> block
 * (inherited from the JKZ originals). They are repeated here so the pages
 * still read correctly if that block is ever removed, and so a future page can
 * use the class without duplicating them again. */
.legal-content {
  max-width: 760px;
  padding: 48px 0 80px;
}
.legal-content h1 { margin-bottom: 8px; }
.legal-content .meta {
  color: var(--faint);
  margin-bottom: 40px;
  font-size: 0.9rem;
}
.legal-content h2 {
  margin-top: 36px; margin-bottom: 8px;
  font-size: 1.2rem; font-weight: 500;
  color: var(--primary-md);
}
.legal-content h3 {
  margin-top: 24px; margin-bottom: 6px;
  font-size: 1rem; font-weight: 500;
}
.legal-content p { margin-bottom: 14px; line-height: 1.7; }
.legal-content ul { margin: 0 0 14px 24px; line-height: 1.7; }
.legal-content li { margin-bottom: 6px; }
.legal-content hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 32px 0;
}
.legal-content a {
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-content a:hover { color: var(--primary-dk); }
.legal-content strong { font-weight: 500; color: var(--ink); }

.display-heading {
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: var(--deep);
  /* "GDPR Compliant Privacy Policy" is long enough to overflow a 390px phone
     as one line. Wrap it rather than let it scroll horizontally. */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* === INDEX PAGE ===
 * The landing page for this host: logo, one line of welcome, and the four
 * legal documents split by store. */
.index-logo {
  width: 132px; height: auto;
  margin: 0 0 20px;
  /* The source PNG has a flat teal background, so it reads as a hard square
     against the page. Round it to match the app-identity icon and the nav. */
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(17,99,112,0.18);
}
.index-lede {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--dim);
  margin: 0 0 10px;
  max-width: 62ch;   /* a comfortable measure; the lede is the only wide prose here */
}
.index-contact { color: var(--dim); }

/* The "More" list. Two columns where there is room, since these are short
   labels and a single tall column wastes the width. */
.legal-content ul.more-links {
  /* .legal-content ul sets a 24px left margin for prose bullets; this list has
     no markers, so that indent would just push it out of alignment with the
     heading above it. */
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 32px;
}
.legal-content ul.more-links li {
  margin-bottom: 10px;
  break-inside: avoid;
}
.legal-content ul.more-links a {
  color: var(--deep);
  text-decoration: underline;
  text-decoration-color: rgba(17,99,112,0.35);
  text-underline-offset: 3px;
}
.legal-content ul.more-links a:hover {
  color: var(--primary-dk);
  text-decoration-color: var(--primary-dk);
}

/* Two columns on a desktop, stacked on a phone. Grid rather than flex so the
   two lists share a row height and their headings line up. */
.store-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin: 8px 0 4px;
}
.store-list h2 {
  margin-top: 0;              /* overrides .legal-content h2's 36px lead-in */
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary);
}
.store-list ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;           /* the store heading already groups these */
}
.store-list li { margin-bottom: 12px; }
.store-list a {
  color: var(--deep);
  font-weight: 500;
  /* Underline via text-decoration rather than a border: these titles wrap to
     two lines, and a bottom border would draw one rule under the whole block
     instead of following each line of text. */
  text-decoration: underline;
  text-decoration-color: rgba(17,99,112,0.35);
  text-underline-offset: 3px;
}
.store-list a:hover {
  color: var(--primary-dk);
  text-decoration-color: var(--primary-dk);
}

@media (max-width: 560px) {
  .store-lists { grid-template-columns: 1fr; gap: 28px; }
  .index-logo { width: 104px; }
  .index-lede { font-size: 1rem; }
}

/* === APP IDENTITY ===
 * A small masthead on each legal page: the app icon, who publishes it, and a
 * screenshot. These documents are reached from a store listing or from inside
 * the app, often out of context, so showing which app they govern is worth the
 * few lines.
 *
 * The screenshot is a low-resolution asset (100x191), so it is displayed at
 * roughly its natural size rather than scaled up, where it would look soft. */
.app-identity {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 36px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--card-b);
  border-radius: 16px;
}
.app-identity-icon {
  width: 88px; height: 88px;
  flex: 0 0 auto;
  border-radius: 20px;   /* squircle-ish, echoing the home-screen icon */
  box-shadow: 0 4px 14px rgba(17,99,112,0.18);
}
.app-identity-text { flex: 1 1 auto; min-width: 0; }
.app-identity-name {
  font-size: 1.15rem; font-weight: 500;
  color: var(--deep);
  margin: 0 0 2px;
}
.app-identity-pub {
  font-size: 0.9rem;
  color: var(--faint);
  margin: 0;
}
.app-identity-shot {
  flex: 0 0 auto;
  width: 100px; height: auto;
  border-radius: 10px;
}

/* Below ~560px the three columns stop fitting; drop the screenshot rather than
   shrink everything, since the icon and publisher carry the meaning. */
@media (max-width: 560px) {
  .app-identity { gap: 14px; padding: 14px 16px; }
  .app-identity-icon { width: 64px; height: 64px; border-radius: 15px; }
  .app-identity-shot { display: none; }
}

/* === SMALL SCREENS ===
 * These pages are linked from inside the app and from the store listings, so
 * most traffic is a phone. */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .container { padding: 0 18px; }
  .section { padding: 24px 18px 56px; }
  .legal-content { padding: 32px 0 56px; }
  .legal-content h2 { margin-top: 28px; }
}