/* This file is generated on 2025-07-12 16:45:37.
 Edit the source file: resources/templates/pages/student/base/base_page_student.css if you need changes. */



:root {
  --header-height: 5rem;
  --sidebar-width: 13rem;

  /*colors */
  --primary-color: #0868a1;
   --primary-color-dark: #05395d;
  --secondary-color: #0972af;
  --tertiary-color:  #E6F2F9;
  --background-color: #f5f5f5;
  --mobile-menu-button-color: #0974b2; /*#0974b2*/

  --width-main-content: 95%;
  --max-width-main-content: 80rem;

  --mobile-horizontal-padding: 1rem;

  /*fonts */
  --font-family-main: "Century Gothic", Tahoma, Geneva, Verdana, sans-serif;
  --font-family-mono: "Courier New", Courier, monospace;

   --focus:#ffbf47;

  --tablet-breakpoint: 64rem; /* 1024px = 64rem (assuming 16px root font-size) */

}


body {
  font-family: var(--font-family-main);
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: var(--header-height);  
  background: var(--primary-color);
  background: url("../../../../images/header.svg") center/cover no-repeat;
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 0 4rem;
}

/* Brand (logo + tekst) */
.brand{
  /*display:inline-flex; align-items:center; gap:.625rem;
  text-decoration:none; color:inherit; line-height:1;
  border-radius:var(--radius); padding:.25rem .5rem;*/
}
.brand:focus-visible{ outline:.2rem solid var(--focus); outline-offset:.2rem; background:rgba(255,255,255,.08); }
.brand__img{ display:block; height:calc(var(--header-height) - 1rem); width:auto; }
.brand__text{ font-weight:700; font-size:1.125rem; letter-spacing:.01em; }



.header h1 {
  color: white;
  text-align: center;
  flex: 1;
}

.sidebar {
  width: var(--sidebar-width);
  background: var(--primary-color);
  color: #fff;
  min-height: calc(100vh - var(--header-height));
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.07);
  position: fixed;
  top: var(--header-height);
  left: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
}

.main-content {
  margin-left: var(--sidebar-width);
  margin-top: var(--header-height);
  padding: 1rem;
  background: #f5f5f5;
  min-height: calc(100vh - var(--header-height));
}

/*section like accordion, question form, etc. */
/*exclude modals*/
/* should have a max-width and the width and max-width should be variables */
main > section:not(.modal) {
  width: var(--width-main-content);
  margin: 0 auto;
  max-width: var(--max-width-main-content);
}

/*Override default heading styles */
/*TODO: check whether H1 is a header type that can be used in the main content */
.main-content > section h1,
.main-content > section h2 {
  text-align: left;
}


/* date time  */
/*
  .meta__datetime, .meta__datetime time
  ------------------------------------------------------------
  Shared styling for date/time elements used across multiple widgets.
  Intended for reuse by different UI components (e.g. activity items,
  comment/meta panels, cards) that display timestamps in a compact form.

  Purpose:
  - Keep date/time inline with other metadata and controls.
  - Apply a muted color and slightly smaller font-size for de-emphasis.
  - Maintain a single-line presentation (no wrapping) and consistent
    vertical alignment inside compact widget layouts.

  Implementation notes:
  - Uses the --muted-color CSS custom property with a fallback of #666.
  - A line-height of 1 ensures tight vertical centering when used
    alongside icons or other inline elements.
*/

/*TODO: move positioning to .meta__datetime */
.meta__datetime,
.meta__datetime time {
  display: inline-block;
  color: var(--muted-color, #666);
  font-size: .7rem;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}



/*mobile styles */
@media (max-width: 64rem) {
  .main-content {
    margin-left: 0;
    width: 100%;
    padding: 0.1rem;
  }

  main > section:not(.modal) {
    width: calc(100% - var(--mobile-horizontal-padding));
    margin: 0 auto;
    max-width: calc(100% - var(--mobile-horizontal-padding));
  }

  .header h1{
    font-size: 1.5rem;
  }

  .brand__img {
   width:45px;
   height:48px;
  }

}