@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

/* =========================================================
   Dynamatik – Style (brokdivider.htm-look)
   ========================================================= */

:root{
  /* Colors */
  --bg: #f4fbff;
  --card: #e6f7ff;
  --card-border: #b3e0ff;

  --text: #0f172a;
  --muted: #334155;

  --primary: #007acc;
  --primary-hover: #005a99;

  --white: #ffffff;

  /* Radius + shadow */
  --r-lg: 12px;
  --r-md: 10px;
  --r-sm: 8px;

  --shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.06);
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
}

body{
  margin: 0;
  padding: 24px 16px;
  font-family: "Noto Sans", sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   Layout containers
   ========================================================= */

.container{
  background-color: var(--card);
  padding: 20px;
  border-radius: var(--r-md);
  border: 2px solid var(--card-border);
  max-width: 650px;
  margin: 0 auto;
  text-align: center;
  box-shadow: var(--shadow);
}

.container h1{
  margin: 8px 0 12px;
  font-size: 28px;
  line-height: 1.15;
}

.container p{
  margin: 8px 0;
  color: var(--muted);
}

/* Optional helper sections (if you use them elsewhere) */
.section{
  margin-top: 14px;
}

/* =========================================================
   Question + Solution
   ========================================================= */

.question{
  font-size: 32px;
  font-weight: 700;
  margin: 14px 0 16px;
  line-height: 1.2;
}

.solution-container{
  display: none; /* JS toggles */
  background-color: var(--white);
  padding: 16px;
  border-radius: var(--r-sm);
  border: 2px solid var(--card-border);
  margin-top: 15px;
  text-align: left;
  box-shadow: var(--shadow-soft);
}

.full-calculation{
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px;
}

.explanation{
  font-size: 16px;
  margin-top: 10px;
  line-height: 1.5;
  color: var(--text);
}

/* =========================================================
   Buttons
   ========================================================= */

.button-container{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}

button,
.button,
.button-container button{
  font-family: inherit;
  font-size: 15px;
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--primary);
  background-color: var(--primary);
  color: var(--white);
  transition: transform 0.05s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

button:hover,
.button:hover,
.button-container button:hover{
  background-color: var(--primary-hover);
  box-shadow: 0 6px 16px rgba(0, 122, 204, 0.25);
}

button:active,
.button:active,
.button-container button:active{
  transform: translateY(1px);
}

button:disabled,
.button:disabled{
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Nice keyboard focus */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 3px solid rgba(0, 122, 204, 0.35);
  outline-offset: 2px;
}

/* =========================================================
   Inputs (useful for answer fields on many pages)
   ========================================================= */

input, select, textarea{
  font-family: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid var(--card-border);
  background: var(--white);
  color: var(--text);
}

input::placeholder, textarea::placeholder{
  color: #64748b;
}

input:focus, select:focus, textarea:focus{
  border-color: rgba(0, 122, 204, 0.55);
  outline: none;
}

/* Common "answer row" helper */
.answer-row{
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* =========================================================
   MathJax / equations
   ========================================================= */

mjx-container{
  overflow-x: auto; /* avoid layout breaks on small screens */
}

/* =========================================================
   Links
   ========================================================= */

a{
  color: var(--primary);
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 420px){
  body{ padding: 16px 12px; }
  .container{ padding: 16px; }
  .question{ font-size: 26px; }
  .container h1{ font-size: 24px; }
  button, .button, .button-container button{ width: 100%; }
}

/* =========================================================
   Print
   ========================================================= */

@media print{
  body{
    background: #fff;
    padding: 0;
  }
  .container{
    box-shadow: none;
    border-color: #99cfee;
  }
  .button-container{
    display: none !important;
  }
  .solution-container{
    display: block !important;
    box-shadow: none;
  }
}
/* =========================================================
   GeoGebra-opgaveside – matcher Dynamatik palette
   (tilføj nederst i style.css)
   ========================================================= */

.wrap{
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 16px;
  align-items: start;
}

.card{
  background: var(--card);
  border: 2px solid var(--card-border);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow);
}

.card h2{
  margin: 4px 0 10px;
  font-size: 24px;
}

#taskText p{
  margin: 8px 0;
  color: var(--muted);
}

#ggb-element{
  background: var(--white);
  border: 2px solid var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* knap-række ligesom dine øvrige sider */
.btns{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  margin-top: 12px;
}

/* feedback “kort” */
#feedback{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 2px solid var(--card-border);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  white-space: pre-line;
}

/* lille hjælpetekst */
.card hr{
  border: none;
  border-top: 1px solid rgba(15, 23, 42, 0.12);
  margin: 14px 0;
}

/* Responsiv */
@media (max-width: 900px){
  .wrap{ grid-template-columns: 360px 1fr; } /* stadig 2 kolonner */
}