/* Haskap Learning: global styles. Loads after Elementor so these win. */

:root {
  --hk-ink: #241412;
  --hk-muted: #5E504B;
  --hk-maroon: #750E0A;
  --hk-maroon-dark: #5A0B08;
  --hk-green: #2F6117;
  --hk-green-dark: #24501A;
  --hk-bg: #F6F7F1;
  --hk-line: #E2DCD3;
  --hk-serif: "Newsreader", Georgia, serif;
  --hk-sans: "Public Sans", system-ui, sans-serif;
}

body.haskap {
  margin: 0;
  background: var(--hk-bg);
  color: var(--hk-ink);
  font-family: var(--hk-sans);
}
body.haskap *, body.haskap *::before, body.haskap *::after { box-sizing: border-box; }
body.haskap h1, body.haskap h2, body.haskap h3 { text-wrap: balance; }

body.haskap a:focus-visible,
body.haskap button:focus-visible,
body.haskap input:focus-visible,
body.haskap select:focus-visible,
body.haskap textarea:focus-visible {
  outline: 3px solid var(--hk-green-dark);
  outline-offset: 3px;
}

.hk-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; color: var(--hk-ink); padding: 10px 16px; border-radius: 6px;
}
.hk-skip:focus { left: 12px; top: 12px; }

.hk-wrap { max-width: 1120px; margin: 0 auto; padding-inline: 40px; width: 100%; }

/* Pill button (header, mobile bar, quiz CTA). Elementor buttons are styled natively in the editor. */
.hk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 26px; border-radius: 999px;
  background: var(--hk-maroon); color: #FFF8F6 !important;
  font: 600 15.5px var(--hk-sans); text-decoration: none; white-space: nowrap;
}
.hk-btn:hover { background: var(--hk-maroon-dark); color: #FFF8F6 !important; }

/* Top bar */
.hk-top { background: #241412; color: #E9DEDB; font-size: 13.5px; }
.hk-top a { color: #F3E9E7; text-decoration: none; }
.hk-top a:hover { color: #F0C9A8; }
.hk-top-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 9px; }
.hk-top-left, .hk-menu-top { display: flex; gap: 22px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.hk-menu-top .current-menu-item a { color: #F0C9A8; }

/* Header */
.hk-header { position: sticky; top: 0; z-index: 50; background: rgba(246,247,241,.96); border-bottom: 1px solid var(--hk-line); }
.admin-bar .hk-header { top: 32px; }
.hk-header .hk-wrap { max-width: 1280px; }
.hk-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; flex-wrap: nowrap; padding-block: 10px; }
.hk-logo { display: flex; flex: none; }
.hk-logo img { height: 46px; width: auto; display: block; mix-blend-mode: multiply; }
.hk-nav { display: flex; align-items: center; gap: 20px; flex-wrap: nowrap; }
.hk-menu-main { display: flex; gap: 20px; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; }
.hk-menu-main a { color: var(--hk-ink); text-decoration: none; font-size: 15px; font-weight: 500; padding-block: 8px; display: inline-block; white-space: nowrap; }
.hk-btn-nav { padding: 0 22px; }
.hk-menu-main a:hover { color: var(--hk-maroon); }
.hk-menu-main .current-menu-item a { color: var(--hk-maroon); box-shadow: inset 0 -2px 0 var(--hk-maroon); }
.hk-menu-btn { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--hk-line); border-radius: 6px; background: #fff; font: 600 14px var(--hk-sans); color: var(--hk-ink); cursor: pointer; }

/* Footer */
.hk-footer { background: #241412; color: #C9AEAA; }
.hk-footer a { color: #F3E9E7; text-decoration: none; font-size: 14.5px; }
.hk-footer a:hover { color: #F0C9A8; }
.hk-footer-inner { padding-block: 56px 28px; display: flex; flex-direction: column; gap: 36px; }
.hk-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; }
.hk-fcol { display: flex; flex-direction: column; gap: 10px; }
.hk-fcol > b { color: #fff; font-size: 14px; font-weight: 600; }
.hk-fcol p { font-size: 14px; line-height: 1.6; max-width: 30ch; margin: 0; }
.hk-menu-footer { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hk-menu-footer span { font-size: 14px; }
.hk-logo-chip { background: #FBF8F3; border-radius: 8px; padding: 10px 12px; align-self: flex-start; display: inline-flex; }
.hk-logo-chip img { height: 34px; width: auto; display: block; }
.hk-footer-bottom { border-top: 1px solid #3E2A26; padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.hk-legal { display: flex; gap: 20px; }
.hk-footer-bottom a { font-size: 13px; }

/* Phone bottom bar (replaces the floating WhatsApp bubble) */
.hk-mbar { display: none; }

/* Elementor content helpers (used through the CSS Classes field) */
.hk-mw46 { max-width: 46ch; }
.hk-mw50 { max-width: 50ch; }
.hk-link a { font-weight: 600; color: var(--hk-green); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.hk-link a:hover { color: var(--hk-maroon); }
.hk-link-light a { color: #F0C9A8; }
.hk-link-white a { color: #fff; }
.hk-abs { position: absolute !important; z-index: 2; width: auto !important; }
.hk-abs .elementor-widget-container { width: auto; }
.hk-hero-visual { isolation: isolate; }
.hk-hero-visual::after {
  content: ""; position: absolute; z-index: -1; top: 0; right: -40px; bottom: 30px; left: 0;
  background: #E3EFDC; border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%;
}
.hk-berry-tr { top: -6px; right: -14px; }
.hk-weekcard { left: 0; bottom: 0; width: 290px !important; }
.hk-berry-deco { right: 4%; top: -40px; opacity: .9; }

.hk-card {
  background: #fff; border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 26px 50px -24px rgba(36,20,18,.4); font-size: 13.5px; color: var(--hk-ink);
}
.hk-card-head { display: flex; justify-content: space-between; align-items: baseline; }
.hk-card-head b { font-family: var(--hk-serif); font-size: 17px; }
.hk-card-head span { font-size: 12px; font-weight: 600; color: var(--hk-green-dark); }
.hk-card-row { display: flex; justify-content: space-between; }
.hk-bar { height: 9px; border-radius: 999px; background: #EEEAE2; overflow: hidden; }
.hk-bar > span { display: block; height: 100%; border-radius: 999px; }
.hk-card p { margin: 2px 0 0; font-size: 12.5px; color: var(--hk-muted); }

.hk-num { font-family: var(--hk-serif); }
.hk-quote::before { content: "\201C"; display: block; font-family: var(--hk-serif); font-size: 56px; line-height: .6; color: #F0C9A8; margin-bottom: 14px; }
.hk-ini { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 10px; border-radius: 999px; background: #9FCB7A; color: #241412; font: 600 15px var(--hk-serif); margin-right: 12px; vertical-align: middle; }
.hk-ini-peach { background: #F0C9A8; color: #24501A; }
.hk-caption { display: flex; align-items: center; }

/* 2-minute check */
.hk-quiz { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 64px; }
.hk-quiz h2 { font-family: var(--hk-serif); font-weight: 600; font-size: 32px; line-height: 1.15; margin: 0 0 14px; color: var(--hk-ink); }
.hk-quiz-lead { font-size: 16.5px; line-height: 1.65; color: var(--hk-muted); margin: 0; }
.hk-result { position: sticky; top: 110px; padding: 24px; margin-top: 22px; display: flex; flex-direction: column; gap: 14px; border-radius: 18px; border: 1px solid var(--hk-line); background: #fff; }
.hk-result.is-active { border-color: #E8C9C3; background: #FBF3F1; }
.admin-bar .hk-result { top: 142px; }
.hk-result-head { display: flex; align-items: baseline; gap: 10px; }
.hk-result-head b { font-family: var(--hk-serif); font-size: 21px; }
.hk-count { margin-left: auto; font-size: 14px; color: var(--hk-muted); }
.hk-empty { margin: 0; font-size: 15px; line-height: 1.55; color: var(--hk-muted); }
.hk-recs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hk-recs li { display: flex; flex-direction: column; gap: 3px; padding-left: 14px; border-left: 3px solid var(--hk-green); }
.hk-recs li.is-maroon { border-left-color: var(--hk-maroon); }
.hk-recs li.is-dark { border-left-color: var(--hk-green-dark); }
.hk-recs li b { font-size: 15.5px; }
.hk-recs li span { font-size: 14.5px; line-height: 1.5; color: var(--hk-muted); }
.hk-result .hk-btn { align-self: flex-start; }
.hk-result .hk-btn[hidden] { display: none; }
.hk-note { margin: 0; font-size: 12.5px; color: #6A5B56; }
.hk-quiz fieldset { border: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hk-quiz legend { font-weight: 700; font-size: 16px; margin-bottom: 10px; padding: 0; }
.hk-check-item { display: flex; gap: 14px; align-items: flex-start; padding: 13px 16px; border: 1px solid var(--hk-line); border-radius: 10px; background: #fff; cursor: pointer; font-size: 15px; line-height: 1.45; }
.hk-check-item input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--hk-maroon); flex: none; }
.hk-check-item.is-on { border-color: var(--hk-maroon); background: #FBF3F1; }

/* Quiz: opt-in share form */
.hk-btn-outline { background: transparent; color: var(--hk-maroon) !important; border: 1.5px solid var(--hk-maroon); cursor: pointer; }
.hk-btn-outline:hover { background: var(--hk-maroon); color: #FFF8F6 !important; }
.hk-result .hk-btn-outline[hidden] { display: none; }
.hk-share { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid #E8C9C3; }
.hk-share[hidden] { display: none; }
.hk-share p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--hk-muted); }
.hk-share label.hk-f { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.hk-share input[type="text"], .hk-share input[type="email"], .hk-share input[type="tel"] {
  font: 400 15px var(--hk-sans); min-height: 46px; padding: 10px 12px; border: 1px solid #CFC6BA; border-radius: 6px; background: #fff; color: var(--hk-ink);
}
.hk-share .hk-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; font-weight: 500; line-height: 1.45; }
.hk-share .hk-consent input { width: 18px; height: 18px; accent-color: var(--hk-maroon); margin-top: 1px; flex: none; }
.hk-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.hk-share-status { font-size: 14.5px; font-weight: 600; }
.hk-share-status.is-error { color: var(--hk-maroon); }
.hk-share-status.is-ok { color: var(--hk-green); }

/* Inner pages */
.hk-blob-rose::after { background: #F5E3DF; }
.hk-blob-green2::after { background: #E1EEDA; }
.hk-blob-tall::after { bottom: 60px; }
.hk-berry-bl { bottom: -10px; left: -6px; }
.hk-profilecard { left: 0; bottom: 0; width: 320px !important; }
.hk-card-profile .hk-card-head b { font-size: 21px; }
.hk-card-profile .hk-pcol { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.hk-card-profile .hk-prow { display: flex; flex-direction: column; gap: 6px; }
.hk-spec { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: 15px; }
.hk-spec dt { color: var(--hk-muted); }
.hk-spec dd { margin: 0; font-weight: 600; color: var(--hk-ink); }
.hk-spec.is-sm { gap: 8px 16px; font-size: 14.5px; }
.hk-spec a { color: var(--hk-green); }
.hk-qg::before { color: #2F6117; }
.hk-qm::before { color: #750E0A; }
.hk-qd::before { color: #24501A; }
.hk-ini-g { background: #2F6117; color: #fff; }
.hk-ini-m { background: #750E0A; color: #fff; }
.hk-ini-d { background: #24501A; color: #fff; font-size: 11px; }
.hk-reply-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: #EAF3E6; color: #2F6117; font: 600 15px var(--hk-sans); }
.hk-reply-pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #0A7A01; }
.hk-cal { border: 1px solid var(--hk-line); border-radius: 22px; background: #fff; overflow: hidden; }
.hk-info-label { font-size: 14px; color: var(--hk-muted); }
.hk-anchor-target { scroll-margin-top: 110px; }
.hk-berry-center { display: flex; align-items: center; justify-content: center; }

/* Long-form text: articles, Privacy Policy, Terms of Use */
.hk-prose { max-width: 720px; margin: 0 auto; font-size: 17px; line-height: 1.75; color: var(--hk-ink); }
.hk-prose > *:first-child { margin-top: 0; }
.hk-prose p { margin: 0 0 1.1em; }
.hk-prose h2 { font-family: var(--hk-serif); font-weight: 600; font-size: 28px; line-height: 1.2; margin: 2em 0 .6em; color: var(--hk-ink); }
.hk-prose h3 { font-family: var(--hk-serif); font-weight: 600; font-size: 22px; line-height: 1.25; margin: 1.6em 0 .5em; color: var(--hk-ink); }
.hk-prose ul, .hk-prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.hk-prose li { margin-bottom: .55em; }
.hk-prose li::marker { color: var(--hk-maroon); }
.hk-prose a { color: var(--hk-green); text-decoration: underline; text-underline-offset: 3px; }
.hk-prose a:hover { color: var(--hk-maroon); }
.hk-prose strong { font-weight: 700; }
.hk-prose img { max-width: 100%; height: auto; border-radius: 18px; }
.hk-prose figure { margin: 1.6em 0; }
.hk-prose figcaption { font-size: 14px; color: var(--hk-muted); margin-top: 8px; }
.hk-prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--hk-maroon); font-family: var(--hk-serif); font-size: 21px; line-height: 1.5; }
.hk-prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0 1.8em; font-size: 15px; line-height: 1.55; }
.hk-prose th, .hk-prose td { text-align: left; vertical-align: top; padding: 12px 14px; border: 1px solid var(--hk-line); }
.hk-prose th { background: #EAF3E6; font-weight: 700; color: var(--hk-green-dark); }
.hk-prose td { background: #fff; }

/* Articles: Resources listing and single article */
.hk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hk-arts { display: flex; flex-direction: column; gap: 44px; }
.hk-topics, .hk-pager { display: flex; flex-wrap: wrap; gap: 10px; }
.hk-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #fff; border: 1px solid var(--hk-line); color: var(--hk-ink); font: 600 14.5px var(--hk-sans); text-decoration: none; }
.hk-chip:hover { border-color: var(--hk-maroon); color: var(--hk-maroon); }
.hk-chip.is-on { background: var(--hk-maroon); border-color: var(--hk-maroon); color: #fff; }
.hk-arts-empty { font-size: 17px; line-height: 1.65; color: var(--hk-muted); margin: 0; }
.hk-arts-empty a { color: var(--hk-green); }

.hk-art { display: flex; flex-direction: column; gap: 14px; }
.hk-art-media { display: block; border-radius: 22px; overflow: hidden; background: #E3EFDC; }
.hk-art-img { display: block; width: 100%; height: 220px; object-fit: cover; }
.hk-art-ph { background: linear-gradient(140deg, #E3EFDC 0%, #F1EDE3 55%, #F5E3DF 100%); }
.hk-art-text { display: flex; flex-direction: column; gap: 10px; }
.hk-art-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: 13.5px; color: var(--hk-muted); }
.hk-art-topic { font-weight: 700; color: var(--hk-green); }
.hk-art-title { margin: 0; font-family: var(--hk-serif); font-weight: 600; font-size: 22px; line-height: 1.25; }
.hk-art-title a { color: var(--hk-ink); text-decoration: none; }
.hk-art-title a:hover { color: var(--hk-maroon); }
.hk-art-sum { margin: 0; font-size: 15px; line-height: 1.6; color: var(--hk-muted); }
.hk-art-more { align-self: flex-start; font-weight: 600; font-size: 15.5px; color: var(--hk-green); text-decoration: underline; text-underline-offset: 4px; min-height: 24px; }
.hk-art-more:hover { color: var(--hk-maroon); }

.hk-art.is-featured { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.hk-art.is-featured .hk-art-media { border-radius: 28px 28px 28px 120px; }
.hk-art.is-featured .hk-art-img { height: 340px; }
.hk-art.is-featured .hk-art-title { font-size: 30px; line-height: 1.2; }
.hk-art.is-featured .hk-art-sum { font-size: 16px; line-height: 1.65; }
.hk-arts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 40px; }
.hk-arts-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }

.hk-article { background: var(--hk-bg); }
.hk-art-hero { max-width: 820px; padding-block: 56px 28px; display: flex; flex-direction: column; gap: 14px; }
.hk-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14.5px; color: var(--hk-muted); }
.hk-crumbs a { color: var(--hk-green); font-weight: 600; text-decoration: none; }
.hk-crumbs a:hover { color: var(--hk-maroon); }
.hk-art-h1 { margin: 0; font-family: var(--hk-serif); font-weight: 600; font-size: 44px; line-height: 1.1; color: var(--hk-ink); text-wrap: balance; }
.hk-article .hk-art-meta { font-size: 14.5px; }
.hk-art-cover { max-width: 1000px; margin: 8px auto 36px; padding-inline: 40px; }
.hk-art-cover img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: cover; border-radius: 28px; }
.hk-art-content { padding-block: 8px 24px; }
.hk-art-share { max-width: 720px; margin: 0 auto; padding-bottom: 72px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.hk-art-back { font-weight: 600; color: var(--hk-green); text-decoration: none; }
.hk-art-back:hover { color: var(--hk-maroon); }
.hk-more { background: #fff; border-block: 1px solid var(--hk-line); padding-block: 72px; }
.hk-more-h { margin: 0 0 32px; font-family: var(--hk-serif); font-weight: 600; font-size: 30px; line-height: 1.15; color: var(--hk-ink); }
.hk-cta { background: var(--hk-maroon); }
.hk-cta-inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 40px; align-items: center; padding-block: 64px; }
.hk-cta h2 { margin: 0 0 12px; font-family: var(--hk-serif); font-weight: 600; font-size: 30px; line-height: 1.15; color: #fff; }
.hk-cta p { margin: 0; font-size: 17px; line-height: 1.6; color: #F3DAD6; max-width: 52ch; }
.hk-cta-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.hk-btn-white { background: #fff; color: var(--hk-maroon) !important; }
.hk-btn-white:hover { background: #F3E9E7; color: var(--hk-maroon) !important; }
.hk-cta-wa { color: #fff; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }

/* Below 1200px the full menu no longer fits beside the logo: switch to the Menu button */
@media (max-width: 1199px) {
  .hk-menu-btn { display: inline-flex; }
  .hk-header-inner { flex-wrap: wrap; }
  .hk-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 0 14px; }
  .hk-nav.is-open { display: flex; }
  .hk-menu-main { flex-direction: column; gap: 0; }
  .hk-menu-main a { display: flex; align-items: center; min-height: 44px; }
  .hk-btn-nav { width: 100%; }
}

/* Tablet and phone */
@media (max-width: 900px) {
  .hk-wrap { padding-inline: 20px; }
  .hk-footer-grid { grid-template-columns: 1fr; }
  .hk-quiz { grid-template-columns: 1fr; gap: 32px; }
  .hk-result { position: static; }
  .hk-berry-deco { display: none; }
  .hk-art.is-featured { grid-template-columns: 1fr; gap: 20px; }
  .hk-arts-grid.is-3 { grid-template-columns: 1fr 1fr; }
  .hk-cta-inner { grid-template-columns: 1fr; gap: 24px; }
  .hk-art-cover { padding-inline: 20px; }
}

@media (max-width: 767px) {
  .admin-bar .hk-header { top: 46px; }
  .hk-top-right { display: none; }
  .hk-logo img { height: 36px; }

  .hk-mbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--hk-line);
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 24px -16px rgba(36,20,18,.3);
  }
  .hk-mbar .hk-btn { font-size: 14.5px; padding: 0 12px; }
  .hk-wa { display: flex; align-items: center; justify-content: center; min-height: 50px; border: 1.5px solid var(--hk-green); border-radius: 6px; color: var(--hk-green); font-weight: 600; font-size: 14.5px; text-decoration: none; }
  .hk-footer-inner { padding-bottom: 110px; }
  .hk-arts-grid, .hk-arts-grid.is-3 { grid-template-columns: 1fr; gap: 36px; }
  .hk-art.is-featured .hk-art-img { height: 230px; }
  .hk-art.is-featured .hk-art-title { font-size: 25px; }
  .hk-art-h1 { font-size: 32px; }
  .hk-art-hero { padding-block: 36px 20px; }
  .hk-prose { font-size: 16.5px; }
  .hk-prose h2 { font-size: 24px; }
  .hk-prose table { display: block; overflow-x: auto; }
  .hk-more { padding-block: 48px; }
  .hk-weekcard { width: 250px !important; left: 6px; }
}