html, body {
  height: 100%;
}

body {
  width: 1080px;
  margin: auto;
  /*padding-top: 15px;*/
  background: #303030;
  font-family: "Cabin", Arial, Helvetica, sans-serif;

  font-size: 1rem;
  line-height: 1.5rem;
  color: #212121;
  padding: 0;
}
.content {
  background: #fff;
  height: 100%;
}
.main {
  background: #fff;
  height: 100%;
}

table{border-collapse:collapse;margin:0px;}
table tr td,
table tr th {
  border: 1px solid #ddd;
}
table tr.header td,
table tr th {
  background-color: #f2f2f2;
}

#content {
  margin-right: 20px;
}

#content h1,
h2,
h3,
h4,
h5,
h6 {
  color: #000 !important;
}

#content h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: 14px;
}

#content h1 {
  margin-top: 10px;
}

#content h4 {
  font-weight: bold;
}

#content h5 {
  text-decoration: underline;
  font-weight: normal;
}

#content h6 {
  text-decoration: none;
  font-weight: normal;
}

#content p {
  margin-bottom: 5px;
}

#task-container {
  margin-top: 10px;
  margin-bottom: 10px;
}

a {
  color: #305189;
  text-decoration: underline;
  /*color: #80AFC7;
  transition: background 0.1s;
  text-decoration: none;*/
}

a:hover {
  color: #193f80;
  /*color: #497D97;*/
}
a.button {
  background: #04b3aa;
  border-radius: 0.5rem;
  /*background: transparent url(../images/brown_button_right.png) no-repeat scroll top right;
  display: block;
  float: left;
  height: 34px;
  margin-right: 6px;
  padding-right: 10px;*/
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}
a.button span {
  background: #04b3aa;
  /*background: transparent url(../images/brown_button_left.png) no-repeat;*/
  display: block;
  line-height: 14px;
  padding: 10px 0px 10px 10px;
}
a.button_active {
   background: #FFA600;
 /*background: transparent url(../images/blue_button_right.png) no-repeat scroll top right;*/
}
a.button_active span {
   background: #FFA600;
  /*background: transparent url(../images/blue_button_left.png) no-repeat;*/
}

/*
#top, #main {
  width: 100%;
}

#top #logo {
  display: none;
}

#top,
#top #innertop {
  height: 105px;
}

#top {
  background: #008FC7 no-repeat url(/shared/images/logo_72.png);
  border-top: 5px solid #22B3E3;
}

#top h1 {
  color: #FFA600;
  font-weight: bold;
  left: 0;
  top: 15px;
}

#top #innertop {
  width: auto;
  padding-left: 190px;
}

#top #topcontrols {
  margin-top: 60px;
  float: right;
}

#top #topbuttons {
  float: left;
  margin-top: 31px;
}
*/

/* reset style: */
#top #topbuttons a.button,
#top #topbuttons a.button span,
#top #topbuttons a.button_active,
#top #topbuttons a.button_active span {
  display: inline;
  line-height: auto;
  padding: auto;
  background: none;
  padding: 0;
  margin: 0;
}

/* end reset style: */

/*
#top #topcontrols a,
#top #topbuttons a.button {
  display: inline-block;
  height: 20px;
  line-height: 18px;
  padding: 10px;
  color: #fff;
  font-weight: bold;
}

#top #topcontrols a.button_active,
#top #topbuttons a.button_active {
  background: #74C700;
}

#top #topcontrols a:hover,
#top #topbuttons a.button:hover {
  background: #22B3E3;
}
*/

#main {
  clear: both;
  margin: auto;
  width: 100%; /*980px;*/
  height: 110%;
  background: white;
}

#maintop {
  display: none;
}

#main #left {
  /*padding-top: 50px;
  background: white;*/
  padding-right: 10px;
  border-right: 1px solid #212121;
  background: white;
}

#left ul li {
  width: auto;
}

#main #page_content {
  margin: 0;
  left: 0;
  padding: 0px 10px 10px 210px;
  /*padding: 10px 30px 10px 210px;*/
  /*padding-left: 210px;*/
  background: white;
}

#main #page_content #title_caption {
  text-align: center;
  background: #74C700;
  color: white;
  padding: 6px 0;
  margin: -30px -210px 10px -30px;
  font-size: 18px;
  position: relative;
  left: -180px;
}

#page_content {
  /*border: 1px solid black;*/
  max-width: 1000px;
}

/* group 'buttons' */
#main #page_content ul {
    margin: 0;
    padding: 0;
}

#main #page_content ul li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: block;
    height: auto;
}

#main #page_content ul li a {
    text-decoration: none;
    font-weight: bold;
    color: white;
    display: block;
    width: 100px;
    padding: 10px 15px;
    background: #039a92;
    margin: 3px;
}

#main #page_content ul li a:hover {
    background: #f6a819;
}

#left ul li.current,
#left ul li.answer,
#left ul li.flagged {
  list-style-image: none !important;
  margin-left: -20px;
  padding-left: 20px;
  background: none;
}

#left ul li.current {
  background: url(https://www.bebras.is/shared/images/arrow.png) no-repeat top left;
}

#left ul li.answer {
  background: url(https://www.bebras.is/shared/images/checkmark.png) no-repeat top left;
}

#left ul li.answer.current {
  background: url(https://www.bebras.is/shared/images/arrow_checkmark.png) no-repeat top left;
}

#left ul li.flagged a {
  background: url(https://www.bebras.is/shared/images/flag.png) no-repeat top right;
}

#left ul li a {
  color: #212121; /*#039a92; #80AFC7;*/
}

#left ul li a:hover {
  color: #014d49; /*#497D97;*/
  text-decoration: underline;
}

#left ul li.current a {
  font-weight: normal;
  color: #FFA600;
}

#question_titlebar {
  margin-top: 0;
}


/* group 'buttons' */
#challenge_groups ul {
  margin: 0;
  padding: 0;
}

#challenge_groups ul li {
  list-style-type: none;
  margin: 0;
  margin-bottom: 20px;
  padding: 0;
  display: block;
  height: auto;
 }

#challenge_groups ul li a {
  text-decoration: none;
  text-decoration: none;
  font-weight: bold;
  color: white;
  display: block;
  width: 400px; /*100px;*/
  padding: 10px 15px;
  background: #04b3aa; /*#008FC7;*/
  margin: 3px;
 border-left: 5px solid transparent; 
  border-color:#039a92;
}

#challenge_groups ul li a:hover {
  background: #039a92; /*#22B3E3;*/
}

#main .warning {
  display: block;
  padding: 10px 15px;
  margin: 0 0 0 -30px;
  border: 0;
  color: white;
  background: #FF5656;
  text-align: center;
  font-style: italic;
}

#codeGrader-subRes.warning {
  background: transparent !important;
  border: 2px solid #FF5656 !important;
  ;
}

button.question,
input[type=submit],
input.erase {
  width: auto;
  min-width: 80px;
  display: block;
  border: 0;
  padding: 10px 15px;
  margin: 20px 10px 10px 2px;
  /*margin-bottom: 10px;
  margin-right: 10px;*/
  font-weight: bold;
  cursor: pointer;
  color: white;
  font-size: 15px;
  /*float: none;*/
}

input.erase {
  margin-top: 0px !important;
  /*float: right;*/
}

div.horizontal {
  display: table-row;
}

div.horizontal.answers {
  /*border: 3px dotted #008FC7; */
  display: table;
  padding-top: 8px;
  margin-bottom: 5px;
}


div.horizontal>button.question,
div.horizontal>input[type=submit],
div.horizontal>input.erase {
  /*float: left;*/
  margin-top: 0px !important;
}

div.horizontal>input.erase.full {
  margin-top: 0px !important;
}

button,
input[type=submit] {
  background-color: #48B948; /*#04b3aa; #00a1c2; background: #008FC7;*/
  border-radius: 0.5rem;

}

button:hover,
input[type=submit]:hover {
  /*background-color: hsla(0, 0%, 100%, 0.1); */
  background: #399539; /*#039a92; #008ca9; #22B3E3;*/
}

input.question,
button.question {}

input.question.selected,
button.question.selected {
  background: #FFA600;
}

.question.image_selected {
  border: 3px solid #FABE4E;
}

input.question.selected:hover {
  background: #FABE4E;
}

input.erase {
  background: #EA2525;
}

input.erase:hover {
  background: #FF5348;
}

input.text.open {
  font-size: 16px;
  padding: 7px;
  float: none;
  margin-left: 0;
  margin-bottom: 10px;
}

#answerform br {
  display: none;
}

#answerform input[type=text]+br+input[type=submit],
#answerform input[type=text]+br+input[type=submit]+br+input[type=submit],
#answerform input[type=hidden]+br+input[type=submit],
#answerform input[type=hidden]+br+input[type=submit]+br+input[type=submit] {
  display: inline-block;
  margin-right: 5px;
}

table.scoring_rules * {
  border: 0;
}

table.scoring_rules td,
table.scoring_rules th {
  padding: 5px 10px;
}

table.scoring_rules th {
  background: #DDDDDD;
  color: #000000;
}

table.scoring_rules td {
  background: #F2F2F2;
  color: #777777;
}

a.question_button_first,
a.question_button_left,
a.question_button_last,
a.question_button_right {
  padding: 3px 0;
  color: #212121; /*#fff; #333;*/
}

a.question_button_first:hover,
a.question_button_left:hover,
a.question_button_last:hover,
a.question_button_right:hover {
  text-decoration: underline;
}

a.question_button_first,
a.question_button_left {
  background: transparent url(https://www.bebras.is/question_files/7/b/e/question_button_left_alt1_ffa600.png) no-repeat center left;
  height: auto;
  padding: 0;
  border-right: 1px solid white;
}

a.question_button_first span,
a.question_button_left span {
  background: #FFA600; /*#04b3aa; #008FC7;*/
  padding-left: 0;
  margin-left: 15px;
  margin-right: 0;
  padding-right: 10px;
}

a.question_button_last,
a.question_button_right {
  background: transparent url(https://www.bebras.is/question_files/5/6/e/question_button_right_alt1_ffa600.png) no-repeat center right;
  height: auto;
  padding: 0;
}

a.question_button_last span,
a.question_button_right span {
  background: #FFA600; /*#04b3aa; #008FC7;*/
  padding-right: 0;
  margin-right: 15px;
  margin-left: 0;
  padding-left: 10px;
}

a#question_flag.button {
  background: #04b3aa; /*#008FC7;*/
  height: 30px;
}

a#question_flag.button span,
a#question_flag span img {
  background: transparent;
}

div#question_clock {
  background-image: url(https://www.bebras.is/question_files/d/0/2/time_left_back_alt1_ffa600.png);
  background-position: middle 25px;
  border: 1px solid #FFA600; /*#04b3aa; #008FC7;*/
  height: 28px;
}

div#question_clock_label,
div#question_clock_value {
  background: transparent;
  color: #333;
  padding: 0;
  line-height: 28px;
  padding: 0px 5px;
}

#answerWarning {
  display: block;
  color: white;
  font-weight: bold;
  padding: 10px;
  margin-left: -50px;
  /*margin-right: -30px;*/
  margin-bottom: 5px;
  text-align: center;
}

#answerWarning.noanswer {}

#answerWarning.correct {
  background: #48B948;
}

#answerWarning.incorrect {
  background: #EF5A5A;
}


#left ul.legend {
  padding-bottom: 10px;
}

.highlight {
  background-color: #fff2a8;
  border-left: 3px solid #fff2a8;
  border-right: 3px solid #fff2a8;
  margin: -3px;
  border-radius: 2px;
}

.screenreader {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
}

.menu-left {
  position: absolute;
  margin-left: -180px;
}

/* Styling for the Code Grader */

.CodeMirror {
  border: 1px solid darkgray;
}

.codeGrader table tr td,
.codeGrader table tr th {
  border: none;
}

.codeGrader.warning {
  border: 2px solid #e64a45;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
}

.codeGrader table.submissions {
  margin: unset;
}

.codeGrader table.submissions tr th {
  background: #04b3aa; /*#008FC7;*/
  color: white;
}

.codeGrader table.submissions tr td {
  border-bottom: 1px solid #04b3aa; /*#008FC7;*/
}

.codeGrader a {
  color: #375b78;
  text-decoration: underline;
}

.codeGrader a:hover {
  color: #21B6B8
}

.codeGrader table.submissions a.refresh-btn {
  background-color: #04b3aa; /*#008FC7;*/
  color: white;
  padding: 2px;
  text-decoration: none;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.codeGrader table.submissions a.refresh-btn:active {
  background-color: orange;
}

.codeGrader table.submissions a.refresh-btn.disabled {
  background-color: #aaaaaa;
  pointer-events: none;
}

/*
Blockly Modules CSS
 */

.bm.module-turtle .control--slider.speed {
  margin-top: 20px !important;
}

.tutorial-content.wide {
  margin-left: -190px;
}

/* Navigation */

nav {
	background-color: white;
	padding: 1rem;
}

.nav_inner {
	--image-size: 120px;
	background-color: #039a92; /*#00a1c2; #04b3aa; #305189;*/
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 2rem;

	padding: 2rem 2rem;
	padding-block-end: 1rem;
	color: #e9f7fc;
	border-radius: 1.5rem;
}

.nav_content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.nav_title {
	font-family: "Coiny", sans-serif;
	align-self: start;
	flex-shrink: 0;
	font-size: 2.5rem;
	margin: 0;
	margin-inline-start: 0.25rem;
	margin-block-end: 0.25rem;
}

.nav_logo-wrapper {
	position: relative;
	flex-shrink: 0;
}

.nav_logo {
	/*aspect-ratio: 1/1;*/
	position: absolute;
	left: 0;
	bottom: 0;
	/*width: 100%;*/
}

.nav_links {
	width: 100%;
	display: flex;
	/*justify-content: space-between;*/border
	/*justify-content: space-between;*/
	flex-wrap: wrap;
}

.nav_login {
	width: auto;
}

.nav_links #topbuttons {
	display: flex;
	gap: 0.25rem;
	flex-wrap: wrap;
}

nav a.button,
nav .nav_login a {
	background: unset;
	display: block;
	float: none;
	margin: 0;
	padding: 0;
	text-decoration: none;

	font-weight: bold;
	color: #e9f7fc;
	height: 44px;
	display: flex;
	align-items: center;
	border-radius: 0.5rem;
	padding: 0 0.5rem;
	transition: 100ms background-color;
}

nav a.button span {
	background: unset;
	display: inline;
	line-height: 1rem;
	padding: 0px;
}

nav a.button:hover,
nav .nav_login a:hover {
	background-color: hsla(0, 0%, 100%, 0.1);
}

nav a.button:active,
nav .nav_login a:active {
	background-color: hsla(0, 0%, 100%, 0.2);
}

/* End of Navigation */

.challenge-date {
	display: flex;
	padding: 1rem 1.5rem;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	align-self: stretch;

	border-radius: 0.5rem;
	border: 2px solid #039a92; /*#00a1c2; #04b3aa; #008fc7;*/
	background: #fff;

	font-size: 1.25rem;
	line-height: 1.5rem;
}

#mode_indicator {
	font-weight: bold;
}

.challenge-header {
	color: #333333; 
	border:none; 
	border-left: 5px solid transparent; 
	border-color: #039a92;
	background-color: #f2f2f2; /*#e5f4f4;*/
	padding:15px; 
	padding-left: 40px;
}

.button_default {
  width: auto;
  min-width: 80px;
  border: 0;
  padding: 10px 15px;
  margin: 2px;
  margin-bottom: 10px;
  font-weight: bold;
  cursor: pointer;
  color: white;
  font-size: 15px;
  background-color: #04b3aa; /*#00a1c2; background: #008FC7;*/
  border-radius: 0.5rem;
  text-decoration: none;
}

.button_default:hover {
  background: #039a92; /*#008ca9; #22B3E3;*/
}

.button_default a {
  color: white;
  text-decoration: none;
}

.box-container {
    display: flex;
	gap: 0.5rem;
}

.text-box {
	flex: 1;
	padding: 1rem 1.5rem;
	justify-content: center;
	align-items: center;
	align-self: stretch;

	border-radius: 0.5rem;
	border: 1px solid #039a92; /*#00a1c2; #04b3aa; #008fc7;*/
	background: #fff;

	/*font-size: 1.25rem;*/
	line-height: 1.5rem;
	background-color:#f2f2f2; 
}
.text-box button {
	font-size: 1.25rem;
}


/* ===============================================================
   BÆTT VIÐ 16.10.2026: UK-útlit + íslenskur litapalletta
   Öruggt að fjarlægja þennan kafla án þess að breyta eldri stíl.
   Ekki er hlaðið inn erlendu Raspberry Pi design-system CSS.
   Nýir .bb-* og .competition-accordion stílar virkjast aðeins
   þegar samsvarandi klasar eru í HTML/Smarty sniðmátunum.
   =============================================================== */

:root {
  --is-primary: #039a92;       /* dökkgrænblár */
  --is-secondary: #04b3aa;     /* grænblár */
  --is-action: #48b948;        /* grænn svarhnappur */
  --is-action-hover: #399539;
  --is-orange: #ffa600;
  --is-link: #305189;
  --is-link-hover: #193f80;
  --is-pale: #e5f4f4;
  --is-panel: #f2f2f2;
  --is-text: #212121;
  --bb-accent: var(--is-primary);

  /* UK-þættir nota þessi heiti; vísa þeim á íslenska liti. */
  --bebras-blue-600: var(--is-primary);
  --bebras-blue-500: var(--is-secondary);
  --bebras-blue-400: var(--is-secondary);
  --bebras-blue-100: var(--is-pale);
  --bebras-blue-aaa: var(--is-primary);
  --bebras-green: var(--is-action);
  --bebras-text: var(--is-text);
  --rpf-white: #fff;
}

/* 1. Flæðandi síðubreidd eins og í UK í stað fastra 1080px. */
html, body {
  max-width: 100%;
}
body {
  width: 100%;
  margin: 0;
  overflow-x: hidden;
  background: #303030;
  font-family: "Cabin", Arial, Helvetica, sans-serif;
}
#main {
  width: 100%;
  height: auto;
  min-height: 100vh;
  background: #fff;
}

/* 2. Rýmra meginmál; aðalefni takmarkað til betri læsileika. */
/*#main #left {
  padding-top: 50px;
  background: white;
  padding-right: 10px;
  border-right: 0;
}
*/
#main #page_content {
  margin: 0;
  left: 0;
  padding: 30px;
  padding-left: 210px;
  background: #fff;  
}
#page_content :is(p, h1, h2, ul, table),
#page_content > div:not(#task-container):not([class*="blockly"]) {
  /*max-width: 65rem;*/
  max-width: 1200px;
}
#page_content h1 {
  font-size: 2rem;
  line-height: 1.25;
  margin-block-end: 1.5rem;
}
#page_content h2 {
  font-size: 1.5rem;
  line-height: 1.35;
  margin-block-end: 1rem;
}
#page_content p { margin-block-end: 1rem; }
#page_content section { margin-block-end: 2rem; }

/* 3. Efst í vefnum: UK-snið, en íslenski liturinn og íslenska lógóið. 
   Ekki snerta myndaslóðir í gamla stílnum. Styður bæði nafngiftakerfi. */
/*
nav { background-color: #fff; padding: 0; }
.nav_inner, .nav__inner {
  background-color: var(--is-primary);
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 2rem;
  padding: 2rem 2rem 1rem;
  color: #e9f7fc;
  border-radius: 0;
}
.nav_logo-wrapper, .nav__logo-wrapper { position: relative; flex-shrink: 0; }
.nav_logo, .nav__logo { position: absolute; left: 0; bottom: 0; }
.nav_login, .nav__login { width: auto; }
.nav_content, .nav__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.nav_title, .nav__title {
  font-family: "Cabin", Arial, Helvetica, sans-serif;
  font-size: 2.5rem;
  font-weight: bold;
}
.nav_links, .nav__links {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.nav_links #topbuttons, .nav__links #topbuttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
nav a.button, nav .nav_login a, nav .nav__login a {
  background: none;
  float: none;
  color: #e9f7fc;
  text-decoration: none;
  height: 44px;
  display: flex;
  align-items: center;
  border-radius: 0.5rem;
  padding: 0 0.5rem;
  font-weight: bold;
}
nav a.button span { display: inline; background: none; line-height: 1rem; padding: 0; }
nav a.button:hover, nav .nav_login a:hover, nav .nav__login a:hover {
  background-color: rgb(255 255 255 / 10%);
}
*/
/* 4. Aðgerðahnappar: bil og flot frá UK, en litum Bebras Ísland haldið. */
/*button.question, input[type="submit"], input.erase {
  width: auto;
  min-width: 80px;
  display: block;
  border: 0;
  padding: 10px 15px;
  margin: 2px 2px 10px;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
  font-size: 15px;
  float: none;
}
button, input[type="submit"] { background-color: var(--is-action); border-radius: 0.5rem; }
button:hover, input[type="submit"]:hover { background-color: var(--is-action-hover); }
input.erase { background: #ea2525; float: none; margin-top: 2px !important; }
input.erase:hover { background: #ff5348; }
input.question.selected, button.question.selected { background: var(--is-orange); }*/

/* UK-afbrigði af áskoranahnöppum, bæði gamalt og nýrra HTML. */
#challenge_groups ul,
#main #page_content ul#user_competitions,
#main #page_content ul.competition-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
#challenge_groups ul li,
#main #page_content ul#user_competitions li,
#main #page_content ul.competition-groups li {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
#challenge_groups ul li a,
#main #page_content ul#user_competitions li a,
#main #page_content ul.competition-groups li a {
  display: block;
  box-sizing: border-box;
  width: auto;
  min-width: 180px;
  max-width: 100%;
  margin: 0;
  padding: 0.875rem 1.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--is-secondary);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
#challenge_groups ul li a:hover,
#main #page_content ul#user_competitions li a:hover,
#main #page_content ul.competition-groups li a:hover {
  background: var(--is-primary);
  color: #fff;
  transform: translateY(-2px);
}
#challenge_groups ul li a:focus-visible,
#main #page_content ul#user_competitions li a:focus-visible,
#main #page_content ul.competition-groups li a:focus-visible {
  outline: 3px solid var(--is-orange);
  outline-offset: 2px;
}

/* 5. UK-lík dreifing viðvörunar og svarupplýsinga. */
#main .warning { margin: 0 -30px; }
#answerWarning { margin-left: -30px; margin-right: -30px; }
#answerform .CodeMirror br { display: initial; }

/* 6. Eldri íslenskir upplýsingakassar lagaðir að breytilegri breidd. */
.box-container { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.text-box { flex: 1 1 280px; min-width: 0; box-sizing: border-box; }
.challenge-date { flex-wrap: wrap; text-align: center; }

/* 7. UK-þættir sem hægt er að nota í nýju HTML: tilvitnanir, myndir o.fl. */
.home__logos { display: flex; flex-wrap: wrap; gap: 2rem; }
.home__logos--center { justify-content: center; }
.quote-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.quote { position: relative; padding: 1rem; background: var(--is-pale); }
#page_content .quote p { margin: 0; }
.quote::after {
  content: "";
  position: absolute;
  bottom: -28px;
  left: 0;
  width: 40px;
  height: 28px;
  background: var(--is-pale);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.quote-right::after { right: 0; left: auto; transform: scaleX(-1); }
.about__organisers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.about__organiser { display: flex; flex-direction: column; gap: 1rem; }
.tag_line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border: 2px solid var(--is-primary);
  border-radius: 0.5rem;
  background: #fff;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.5;
}
#page_content .tag_line p { margin: 0; }
.cc-banner { width: 100%; max-width: 600px; height: auto; }

/* 8. Farsímastílar vantaði í íslensku skrána. */
@media screen and (max-width: 768px) {
  html, body { overflow-x: hidden; }
  #main { display: flex; flex-direction: column; }
  #main #left {
    order: -1;
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    border-right: 0;
    min-height: 0;
  }
  #left ul.menu { min-height: 0; }
  .menu-left { position: static; margin-left: 0; margin-bottom: 20px; }
  #main #page_content {
    order: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
  }
  #main #page_content #title_caption {
    margin: -20px -20px 20px;
    left: 0;
  }
  #page_content :is(p, h1, h2, h3, h4, h5, h6, ul, ol, table),
  #page_content > div:not(#task-container):not([class*="blockly"]) {
    max-width: 100%;
  }
  .nav_inner, .nav__inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 1.5rem 1rem;
  }
  .nav_logo-wrapper, .nav__logo-wrapper {
    width: 120px;
    height: 120px;
    margin-inline: auto;
  }
  .nav_title, .nav__title {
    align-self: center;
    margin-inline-start: 0;
  }
  .nav_links, .nav__links { flex-direction: column; gap: 10px; }
  .nav_links #topbuttons, .nav__links #topbuttons { justify-content: center; }
  nav a.button, nav .nav_login a, nav .nav__login a { justify-content: center; }
  #challenge_groups ul,
  #main #page_content ul#user_competitions { flex-direction: column; }
  #challenge_groups ul li a,
  #main #page_content ul#user_competitions li a { width: 100%; min-width: 0; }
  button.question, input[type="submit"], input.erase {
    width: 100%;
    min-width: 0;
    float: none;
    box-sizing: border-box;
  }
  div.horizontal, div.horizontal.answers { display: block; }
  div.horizontal > button.question,
  div.horizontal > input[type="submit"],
  div.horizontal > input.erase { float: none; width: 100%; }
  input[type="text"], textarea, select { max-width: 100%; box-sizing: border-box; }
  #page_content table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; }
  #page_content th, #page_content td { padding: 8px; }
  img { max-width: 100%; height: auto; }
  .quote-container, .about__organisers { grid-template-columns: 1fr; }
  .quote::after { display: none; }
  .home__logos { flex-direction: column; align-items: center; }
  .tutorial-content.wide { margin-left: 0; }
  .submissions .detailContainer, .cm-content { max-width: 100%; }
  .CodeMirror { overflow-x: auto; }
}
@media screen and (max-width: 480px) {
  #main #page_content { padding: 15px; }
  #page_content h1 { font-size: 1.8rem; }
  #page_content h2 { font-size: 1.4rem; }
  .nav_title, .nav__title { font-size: 2rem; }
}


/* ===============================================================
   VALKVÆTT: UK-Spjaldakerfi (.bb-*) og fellilistar (#competition-list)
   Krefst HTML/Smarty klasa (og fellilistar krefjast JS/jQuery UI).
   =============================================================== */
/* ---------- Page rhythm ---------- */

/* Spacing lives on the blocks themselves rather than on a parent class,
   so it does not matter what the CMS wraps the page content in. */
.bb-date-banner,
.bb-block {
  margin-block-end: 2rem;
}

.bb-block:last-child {
  margin-block-end: 0;
}

/* ---------- Challenge date banner ---------- */

.bb-date-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border: 2px solid var(--bb-accent, #039a92);
  border-radius: 0.5rem;
  background: var(--rpf-white, #fff);
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
}

/* #page_content h1 sets its own font-size, so re-assert ours. */
#page_content h1.bb-date-banner {
  font-size: 1.1rem;
}

/* ---------- Content blocks ---------- */

.bb-block {
  background: var(--rpf-white, #fff);
  border: 2px solid var(--bb-accent, #039a92);
  border-radius: 1rem;
  padding: 1.5rem 2rem;
}

.bb-block > *:first-child {
  margin-block-start: 0;
}

.bb-block > *:last-child {
  margin-block-end: 0;
}

/* Literal hex rather than var(--bebras-blue-100): that token now resolves
   to --rpf-navy-100, which is so close to white that the gradient was
   invisible. The stop at 55% keeps the blue present long enough to see.
   Uses the `background` shorthand so it beats .bb-block's `background`
   regardless of which order the two rules end up in. */
.bb-block--hero {
  background: linear-gradient(135deg, #e5f4f4 0%, #ffffff 55%);
}

/* Two or more blocks sitting side by side. Collapses to a single
   column once there is not room for two. Cards stretch to equal
   height, so put it on a wrapper around the blocks, not on .main. */
.bb-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-block-end: 2rem;
}

.bb-row > .bb-block {
  margin-block-end: 0;
}

/* Heading with an icon sitting next to it. */
.bb-block__heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0;
}

/* Larger heading for the lead section at the top of a page.
   #page_content h2 carries an ID, so match it to win on specificity. */
#page_content .bb-block__heading--lead {
  font-size: 2.25rem;
  line-height: var(--line-height-2-5, 1.3);
  margin-block-end: var(--space-3, 1.25rem);
}

/* ---------- Two-column split (text | image) ---------- */

.bb-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  align-items: start;
}

/* Uneven split giving the text more room than the image, and centring
   the text against a taller image so it does not leave a gap beneath. */
.bb-split--wide-text {
  grid-template-columns: 1fr;
}

@media screen and (min-width: 800px) {
  .bb-split--wide-text {
    grid-template-columns: 3fr 2fr;
    align-items: start;
  }
}

.bb-split__center {
  align-self: center;
}

/* ---------- Buttons ---------- */

/* Spacing above uses padding, not margin: style.css contains
   `#page_content * { margin-top: 0 }`, whose ID beats any class
   selector, so margin-top is unusable inside page content. */
.bb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1rem;
  /* margin-bottom still works (only margin-top is reset), and without it
     any paragraph following a button sits flush against it. */
  margin-block-end: 1.25rem;
}

.bb-actions--center {
  justify-content: center;
  padding-top: 2.5rem;
}

.bb-button {
  display: inline-block;
  background: var(--bb-accent, #039a92);
  color: var(--rpf-white, #fff);
  font-weight: bold;
  text-decoration: none;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  border-radius: 0.5rem;
  transition:
    background-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

/* The global `a` rule sets colour + underline, so restate on states. */
.bb-button:hover,
.bb-button:focus-visible {
  background: var(--bebras-blue-600, #039a92);
  color: var(--rpf-white, #fff);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(3, 154, 146, 0.25);
}

.bb-button:active {
  transform: translateY(0);
}

/* Lighter-weight button for a supporting action, so it does not compete
   with the main call to action in the same block. */
.bb-button--small {
  padding: 0.6rem 1.25rem;
  font-size: 1rem;
}

/* ---------- Media column ---------- */

.bb-media {
  text-align: center;
}

.bb-media__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: cover;
  border-radius: 1rem;
}

/* padding, not margin — see the #page_content * note above. */
.bb-media__caption {
  padding-top: 0.75rem;
}

/* Decorative illustration inside a block. Unlike .bb-media__image this
   never crops, since the whole drawing needs to stay visible. */
.bb-illustration {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin-inline: auto;
}

/* Illustration sitting across the top of a block, above the text. */
.bb-illustration--banner {
  max-width: 100%;
  margin-block-end: 1.25rem;
}

/* ---------- Skill pills ---------- */

/* A plain list rendered as a row of pills. White fill, so they stay
   visible against the .bb-block--hero gradient; swap to
   var(--bebras-blue-100) if used inside a plain white .bb-block. */
.bb-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin-block: 0 1rem;
  padding: 0.5rem 0 0;
}

.bb-skills li {
  margin: 0;
  padding: 0.35rem 0.8rem;
  border-radius: 1.25rem;
  border: 2px solid var(--bb-accent, #039a92);
  background: var(--rpf-white, #fff);
  color: var(--bb-accent, #039a92);
  font-size: 0.9rem;
  font-weight: bold;
}

/* ---------- Example task card ---------- */

/* Frames a task screenshot so it reads as a sample of the real thing
   rather than a stray picture. Use on a <figure>. */
.bb-task-card {
  max-width: 380px;
  margin: 0 auto;
  border: 2px solid var(--bb-accent, #039a92);
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--rpf-white, #fff);
}

.bb-task-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--bb-accent, #039a92);
  color: var(--rpf-white, #fff);
  font-weight: bold;
  font-size: 0.95rem;
}

.bb-task-card__tag {
  flex-shrink: 0;
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--rpf-white, #fff);
  color: var(--bb-accent, #039a92);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bb-task-card__image {
  display: block;
  width: 100%;
  height: auto;
  border-block-end: 2px solid var(--bebras-blue-100, #e5f4f4);
}

/* #page_content p wins on specificity, so match it to reset the margin. */
#page_content .bb-task-card__body {
  margin: 0;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
}

.home__logos.home__logos--center {
  justify-content: center;
}

/* ---------- Tables ---------- */

.bb-table-wrap {
  overflow-x: auto;
  margin: 1rem 0;
}

.bb-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #000;
}

.bb-table th,
.bb-table td {
  border: 1px solid #000;
  padding: 0.6rem 1rem;
  text-align: center;
}

.bb-table th {
  background: var(--bebras-blue-600, #039a92);
  color: var(--rpf-white, #fff);
  padding: 0.75rem 1rem;
}

/* First column is a row label: left-aligned and bold. */
.bb-table th:first-child,
.bb-table td:first-child {
  text-align: left;
}

.bb-table tbody td:first-child {
  font-weight: bold;
}

/* Wide table that needs to scroll sideways on narrow screens. */
.bb-table--wide {
  min-width: 600px;
}

/* Challenge groups table: highlight the age column, fix column widths. */
.bb-table--groups tbody td:nth-child(2) {
  background: var(--bebras-blue-100, #e5f4f4);
}

.bb-table--groups th:nth-child(1) { width: 18%; }
.bb-table--groups th:nth-child(2) { width: 17%; }
.bb-table--groups th:nth-child(3) { width: 24%; }
.bb-table--groups th:nth-child(4) { width: 22%; }
.bb-table--groups th:nth-child(5) { width: 19%; }

/* Small table inside an accordion: no forced min-width. */
.bb-table--plain {
  min-width: 0;
}

/* Every column left-aligned. */
.bb-table--left th,
.bb-table--left td {
  text-align: left;
}

/* ---------- FAQ accordion grid ---------- */

.bb-faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.bb-faq-grid .rpf-accordion {
  /* .rpf-accordion (design-system-core.css) exposes these as custom
     properties, so override them instead of fighting its background/
     border-block-start rules directly. */
  --background-color: var(--bebras-blue-100, #e5f4f4);
  --border-color: transparent;
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
  margin: 0;
}

.bb-faq-grid .rpf-accordion__text {
  margin-block-end: 0;
}





/* ---------- Practice quiz card grid (home educated page) ---------- */

/* One card per challenge group, each holding that group's practice links.
   auto-fit + minmax collapses to fewer columns on its own, so this needs
   no entry in the mobile media query. */
.bb-quiz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  align-items: start;
  list-style: none;
  /* Space above is padding, not margin: style_common_stripped.css has
     `#page_content * { margin-top: 0px }`, whose ID beats any class. */
  padding: 1.5rem 0 0;
  margin-block-end: 1.5rem;
}

.bb-quiz-card {
  margin: 0;
  padding: 1rem 1.5rem;
  border: 2px solid var(--bb-accent, #039a92);
  border-radius: 0.5rem;
  background: var(--bebras-blue-100, #e5f4f4);
}

/* This stylesheet carries a bare `h2, h3, h4, h5, h6 { color: #000 !important }`
   rule, so the heading colour is not ours to set here — size and spacing only. */
.bb-quiz-card__heading {
  font-size: 1.125rem;
  line-height: var(--line-height-1-5, 1.5);
  margin: 0 0 0.75rem;
}

.bb-quiz-card__links {
  display: flex;
  flex-direction: column;
  /* gap rather than margin between items — see the margin-top note above. */
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bb-quiz-card__links li {
  margin: 0;
  padding: 0;
}

/* The global `a` rule already supplies colour and underline; only the
   weight needs adding so the links read as the card's main content. */
.bb-quiz-card__links a {
  font-weight: bold;
}

.bb-quiz-note {
  font-size: 0.95rem;
}


/* Viðbótarstillingar fyrir íslenska liti og mjög mjóa skjái. */
.bb-button { background: var(--is-secondary); }
.bb-button:hover, .bb-button:focus-visible { background: var(--is-primary); }
.bb-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.bb-split { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.bb-quiz-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.bb-faq-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
@media screen and (max-width: 768px) {
  .bb-block { padding: 1rem 1.5rem; }
  .bb-faq-grid { grid-template-columns: 1fr; }
}
/* UK-fellilistar: aðeins þegar #competition-list og viðkomandi klasar eru í HTML. */
#competition-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block-end: 2rem;
}

/* ---------- The card ---------- */

#competition-list .competition-accordion {
  border: 2px solid var(--bebras-blue-600, #039a92);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--rpf-white, #fff);
  font-family: "Cabin", Arial, Helvetica, sans-serif;
}

/* ---------- Header ---------- */

#competition-list .competition-accordion-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 1rem 1.5rem;
  border: 0;
  border-radius: 0;
  background: var(--bebras-blue-600, #039a92);
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.15s ease;

  /* This stylesheet contains a bare `h2, h3, h4… { color: #000 !important }`
     rule and the header is an <h3>, so !important is the only way past it. */
  color: var(--rpf-white, #fff) !important;
}

#competition-list .competition-accordion-header:hover,
#competition-list .competition-accordion-header.ui-state-hover,
#competition-list .competition-accordion-header.ui-state-active,
#competition-list .competition-accordion-header.ui-accordion-header-active {
  background: var(--bebras-blue-500, #04b3aa);
}

#competition-list .competition-accordion-header:focus-visible {
  outline: 3px solid var(--bebras-green, #74c700);
  outline-offset: -3px;
}

/* The title is an <a href="#">, so the global `a` rule would colour and
   underline it. Restate here. */
#competition-list .competition-accordion-header > a,
#competition-list .competition-accordion-header > a:hover {
  color: inherit;
  text-decoration: none;
  font: inherit;
  flex: 1;
}

/* ---------- Expand/collapse chevron ---------- */

/* Replaces the jQuery UI sprite (ui-icons_*.png) with a CSS chevron that
   inherits the header colour, so there is no image to recolour or 404. */
#competition-list .ui-accordion-header-icon {
  position: static;   /* jQuery UI absolutely positions this */
  order: 2;           /* markup puts it first; we want it on the right */
  width: 0.5em;
  height: 0.5em;
  margin: 0;
  background: none;
  text-indent: 0;
  flex-shrink: 0;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);          /* collapsed: points right */
  transition: transform 0.2s ease;
}

#competition-list .ui-accordion-header-active .ui-accordion-header-icon {
  transform: rotate(135deg);         /* expanded: points down */
}

/* ---------- Panel ---------- */

#competition-list .competition-accordion-panel {
  border: 0;
  padding: 1.5rem;
  background: var(--rpf-white, #fff);
  color: var(--bebras-text, #212121);
  font-family: inherit;
}

#competition-list .competition-accordion-panel h4 {
  font-size: 0.9rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bebras-blue-600, #039a92);
  padding-block-end: 0.75rem;
}

/* ---------- Group buttons ---------- */

#competition-list .competition-accordion-panel ul:has(> li.user_competitions-group-buttons) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

#competition-list li.user_competitions-group-buttons {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

#competition-list li.user_competitions-group-buttons br {
  display: none;
}

#competition-list li.user_competitions-group-buttons > a {
  display: block;
  min-width: 240px;
  margin: 0;                          /* was `margin: 10px 0`, which fought the gap */
  padding: 0.875rem 1.5rem;
  background: var(--bebras-blue-600, #039a92);
  color: var(--rpf-white, #fff);
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  border-radius: var(--space-1, 0.5rem);
  transition:
    background-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}


#competition-list li.user_competitions-group-buttons > a:hover,
#competition-list li.user_competitions-group-buttons > a:focus-visible {
  background: var(--bebras-blue-500, #04b3aa);
  color: var(--rpf-white, #fff);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(3, 154, 146, 0.25);
}

#competition-list li.user_competitions-group-buttons > a:active {
  transform: translateY(0);
}

/* ---------- Mobile ---------- */

@media screen and (max-width: 768px) {
  #competition-list .competition-accordion-header {
    padding: 0.875rem 1rem;
    font-size: 1rem;
  }

  #competition-list .competition-accordion-panel {
    padding: 1rem;
  }

  #competition-list .competition-accordion-panel ul:has(> li.user_competitions-group-buttons) {
    flex-direction: column;
  }

  #competition-list li.user_competitions-group-buttons > a {
    min-width: 0;
  }
}

/* UK notar litaforskilgreiningu með !important fyrir h3/h4.
   Því þarf !important á lit undirfyrirsagnar innan fellilista. */
#competition-list .competition-accordion-panel h4 { color: var(--is-primary) !important; }