/* JAK Consulting Ltd website styles */
/* Fonts: Fraunces (headings) and Plus Jakarta Sans (body), loaded from Google Fonts in each page's <head>. */

:root {
  --jak-purple: #3A1558;
  --jak-plum: #8A3363;
  --jak-ink: #221432;
  --jak-cream: #FAF7F4;
  --jak-side: max(48px, calc((100% - 1200px) / 2));
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--jak-cream);
  color: var(--jak-ink);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--jak-purple); }
a:hover { color: var(--jak-plum); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--jak-plum);
  outline-offset: 2px;
}

/* Desktop or mobile layout */
.jak-mobile { display: none !important; }
@media (max-width: 1199px) {
  .jak-desktop { display: none !important; }
  .jak-mobile { display: flex !important; }
}

/* Keep desktop content centred on very wide screens */
.jak-desktop .jak-wrap {
  padding-left: var(--jak-side) !important;
  padding-right: var(--jak-side) !important;
}
.jak-desktop .jak-inset {
  margin-left: var(--jak-side) !important;
  margin-right: var(--jak-side) !important;
}

/* Desktop footer: let the links wrap neatly */
.jak-desktop footer nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 10px; column-gap: 24px !important; max-width: 640px; }
.jak-desktop footer nav a { white-space: nowrap; }

/* Mobile menu */
.jak-mobile-menu {
  display: flex;
  flex-direction: column;
  padding: 8px 20px 20px;
  background: #FFFFFF;
  border-bottom: 1px solid #E8E1EA;
}
.jak-mobile-menu[hidden] { display: none; }
.jak-mobile-menu a {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid #EFE9F0;
  color: var(--jak-ink);
  font-weight: 600;
  text-decoration: none;
}
.jak-mobile-menu a.jak-menu-cta {
  justify-content: center;
  margin-top: 16px;
  border: 0;
  border-radius: 999px;
  background: var(--jak-purple);
  color: #FFFFFF;
}

/* Form fields */
input, select, textarea { font: inherit; color: var(--jak-ink); }
input:focus, select:focus, textarea:focus { border-color: var(--jak-purple) !important; }

/* Smaller screens: soften very large headings */
@media (max-width: 380px) {
  .jak-mobile h1 { font-size: 34px !important; }
}

/* WordPress: when pasted into a Custom HTML block, let the design use the full width */
.jak-site { width: 100%; }