/*
 * Reusable component framework for the entire IgA site.
 * Existing project-iga.css loads after this file and keeps priority for the
 * site's header, navigation, home page and other established designs.
 */
@import url("./base/variables.css");
@import url("./layout/grid.css");
@import url("./layout/flow.css");
@import url("./layout/anchor.css");
@import url("./layout/page.css");
@import url("./components/button.css");
@import url("./components/card.css");
@import url("./components/table.css");
@import url("./components/heading.css");
@import url("./components/list.css");
@import url("./components/news-list.css");
@import url("./components/notice.css");
@import url("./components/icon-links.css");
@import url("./components/accordion.css");
@import url("./components/faq.css");
@import url("./components/breadcrumb.css");
@import url("./features/modal.css");
@import url("./utility/spacing.css");
@import url("./utility/display.css");
@import url("./utility/text.css");

/* The shared styles were authored on a 10px rem scale. Preserve the IgA
 * site's established 15px body typography, which uses explicit px values. */
html { font-size: 62.5%; }

/* General / patient-facing pages */
.project-iga.theme-general {
  --color-main: #bd621c;
  --color-sub: var(--orange);
  --color-link: #ad5415;
  --color-link-hover: #873f0f;
  --table-th-bg: #fff3e6;
  --flow-head-bg: var(--orange);
  --flow-head-text: #fff;
  --flow-border: #e9bc95;
  --flow-arrow: var(--orange);
  --faq-question-mark: #bd621c;
  --faq-answer-mark: #bd621c;
  --faq-icon: #bd621c;
}

/* Medical / professional-facing pages */
.project-iga.theme-medical {
  --color-main: #24758b;
  --color-sub: var(--cyan);
  --color-link: #166a83;
  --color-link-hover: #10536a;
  --table-th-bg: #eaf6f8;
  --flow-head-bg: var(--cyan);
  --flow-head-text: #fff;
  --flow-border: #a2cfdb;
  --flow-arrow: var(--cyan);
  --faq-question-mark: #24758b;
  --faq-answer-mark: #24758b;
  --faq-icon: #24758b;
}

/* The shared body typography is opt-in, so existing article typography stays
 * unchanged. Use .page-content__body when drafting framework-based content. */
.project-iga .page-content__body { color: var(--color-text); }
.project-iga .c-anchor-target { scroll-margin-top:calc(var(--iga-header-height, 90px) + 18px); }

/* Small companion classes referenced by the original JSHI style samples. */
.project-iga .c-accordion__title { display:block; min-width:0; }
.project-iga .c-side-banner--poster { display:block; width:100%; }
.project-iga .u-visually-hidden {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}