@import "global/variables.css";
@import "global/theme.css";
@import "global/layouts.css";
@import "global/topbar.css";
@import "global/sidebar.css";
@import "global/footer.css";
@import "global/legacy2016.css";

html {
  font-size: 16px;
  font-weight: 600;
}

body {
  margin: 0;
  /* in design guide: body 2 14px */
  font-family: "Roboto", "Chiron Hei HK", "微軟正黑體", "Microsoft JhengHei",
    sans-serif;
  font-size: 1rem;
  /* in design guide: body 1 */
  font-weight: 600;
  color: var(--ocf-dark);
}

#page__pushable--wrapper {
  --sidebar-width: 18.75rem;

  overflow-x: hidden;
  position: relative;
  left: 0;
  transition: all var(--page-transition_duration) ease;

  display: grid;
  grid-template-columns: 100vw auto;

  #page__pushable,
  #page__pusher {
    height: 100vh;
    overflow-y: auto;
  }

  #page__pusher {
    background-color: var(--ocf-dark);
    width: 0;
  }

  &.page__pushable--wrapper--pushed {
    left: calc(var(--sidebar-width) * -1);

    #page__pushable {
      overflow-y: hidden;
    }
    #page__pusher {
      width: var(--sidebar-width);
    }
  }
}

@media only screen and (960px <= width) {
  #page__pushable--wrapper {
    --sidebar-width: 0;
  }
}

#keyvisual_inner {
  position: relative;
  background-position: center;
  background-size: cover;
}

#keyvisual_inner .container.upper {
  display: flex;
  align-items: flex-end;
}
#keyvisual_inner .container.lower {
  display: flex;
  align-items: flex-start;
  padding-bottom: 1rem;
}

#keyvisual_inner .container img.decorator {
  width: 100%;
}

#keyvisual_inner #title_block {
  position: relative;
  background-color: var(--ocf-white);
}

#keyvisual_inner #title_block h1 {
  font-size: 3rem;
  padding: 1rem 0;
  margin: 0;
  margin-left: 12%;
}

@media screen and (500px <= width < 1024px) {
  #keyvisual_inner #title_block h1 {
    font-size: 1.2rem;
    padding: 0.5em 0;
    margin-left: 12%;
  }
}

@media screen and (width < 500px) {
  #keyvisual_inner #title_block h1 {
    font-size: 1rem;
    padding: 0.5em 0;
    margin-left: 10%;
  }
  #keyvisual_inner {
    /* height: 30vh; */
  }
}

#keyvisual_inner #subtitle_block {
  background-color: var(--ocf-white);
  position: absolute;
  right: 0;
  top: calc(1.325rem * 4 * -1);
  min-width: 45%;
  padding: 0.125rem 0.5rem;
}

#keyvisual_inner #subtitle_block p {
  color: var(--ocf-primary);
  font-size: 1.325rem;
  margin: 0;
}

@media screen and (600px <= width < 1024px) {
  #keyvisual_inner #subtitle_block {
    top: calc(1rem * 4 * -1);
    width: 40%;
  }
  #keyvisual_inner #subtitle_block p {
    font-size: 1rem;
  }
}

@media screen and (width < 600px) {
  #keyvisual_inner #subtitle_block {
    top: calc(0.625rem * 4 * -1);
  }
  #keyvisual_inner #subtitle_block p {
    font-size: 0.625rem;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto Slab", sans-serif;
  color: var(--ocf-primary);
  margin: 1em 0;
}

h1 {
  /* in design guide: large title */
  font-size: 3rem;
}

h2 {
  /* in design guide: title 1: 26px */
  font-size: 1.75rem;
}

h3 {
  /* in design guide: title 2 */
  font-size: 1.125rem;
}

h4 {
  /* in design guide: title 3 */
  font-size: 0.875rem;
}

.headline {
  font-size: 2.25rem;
}

p {
  /* in design guide: body 2 */
  font-size: 1rem;
  font-weight: 500;
}

p.small {
  /* in design guide: body 1 */
  font-size: 0.75rem;
}

@media only screen and (width < 400px) {
  h1 {
    font-size: 1.125rem;
  }
  h2 {
    font-size: 1rem;
  }
  h3 {
    font-size: 0.875rem;
  }
  p {
    font-size: 13px;
  }
  p.small {
    font-size: 0.5625rem;
  }
}

p.primary {
  color: var(--ocf-primary);
}

.footnote {
  /* in design guide: footnote */
  font-size: 0.6875rem;
}

figure {
  margin: 0;
  padding: 0;
}

figcaption {
  /* in design guide: caption 1 */
  font-size: 0.875rem;
}

figcaption.small {
  /* in design guide: caption 2 */
  font-size: 0.4375rem;
}

img {
  border: none;
  margin-bottom: -4px;
}

button {
  border: none;
  background: none;
  color: inherit;
  padding: 0.5em 1em;
  margin: 0;
}

a,
a:link,
a:hover {
  text-decoration: none;
}