/*
 * Nord Formdesigner CSS Styles
 * =============================
 *
 * Kreative CSS-former for Canvas LMS
 * Inspirert av https://css-shape.com/
 *
 * INSTALLASJON:
 * Disse CSS-klassene må legges til i Canvas sin globale CSS.
 * For Nord University: Legg til i NordCanvas CSS-filen.
 *
 * BRUK:
 * Bruk Nord Formdesigner HTML-verktøyet (form-designer.html)
 * for å generere HTML-kode med riktige CSS-klasser.
 *
 * TILPASNING:
 * Hver form støtter CSS-variabler for dynamisk tilpasning:
 * - --s: Mønsterstørrelse (pattern size)
 * - --w: Bredde (width)
 * - background: Hovedfarge
 *
 */

/* ============================================
   1. BØLGEBOKS (Wavy Box)
   ============================================
   Bølget kant rundt hele boksen
*/
.nord-bolgeboks {
  --s: 20px;  /* Kontroller størrelsen på bølgen */
  --w: 360px; /* Ønsket bredde */

  width: round(var(--w), 4*var(--s));
  aspect-ratio: 1;
  padding: var(--s);
  border: var(--s) solid transparent;
  box-sizing: border-box;
  background: #00B0B9; /* Nord Prima 2 - default */
  border-radius: calc(3.5*var(--s));
  mask:
    radial-gradient(calc(sqrt(2)*var(--s)),#000 calc(100% - 1px),#0000),
    conic-gradient(#000 0 0) content-box,
    radial-gradient(calc(sqrt(2)*var(--s)),#0000 100%,#000 calc(100% + 1px))
     var(--s) var(--s) padding-box;
  mask-size: calc(var(--s)*4) calc(var(--s)*4);

  /* Innholdsstyling */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  line-height: 1.6;
  /* Text color set dynamically by form-designer.html for WCAG 2.2 compliance */
}

/* ============================================
   2. SKJELLBOKS (Scalloped Box)
   ============================================
   Skalloppkant (som skjell/bølger)
*/
.nord-skjellboks {
  --r: 25px; /* Radius av sirkler */
  --w: 320px; /* Ønsket bredde */

  width: var(--w);
  aspect-ratio: 1;
  padding: calc(1.5*var(--r));
  box-sizing: border-box;
  background: #8FD6BD; /* Nord Prima 1 - default */
  mask:
    linear-gradient(#000 0 0) no-repeat
     50%/calc(100% - 2*var(--r)) calc(100% - 2*var(--r)),
    radial-gradient(farthest-side,#000 97%,#0000)
     0 0/calc(2*var(--r)) calc(2*var(--r)) round;

  /* Innholdsstyling */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  line-height: 1.6;
  /* Text color set dynamically by form-designer.html for WCAG 2.2 compliance */
}

/* ============================================
   3. FRIMERKE (Stamp)
   ============================================
   Perforert kant som et frimerke
*/
.nord-frimerke {
  --r: 20px; /* Kontroller radius */
  --w: 300px; /* Ønsket bredde */

  width: var(--w);
  aspect-ratio: 1.5;
  padding: var(--r);
  box-sizing: border-box;
  background: #6CC24A; /* Nord Sekund 5 - default */
  mask:
    radial-gradient(50% 50%,#0000 66%,#000 67%) round
     var(--r) var(--r)/calc(2*var(--r)) calc(2*var(--r)),
    conic-gradient(#000 0 0) content-box;

  /* Innholdsstyling */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  line-height: 1.6;
  /* Text color set dynamically by form-designer.html for WCAG 2.2 compliance */
}

/* ============================================
   4. SIKKSAKK (Zig-Zag Box)
   ============================================
   Spisset sikk-sakk kant
*/
.nord-sikksakk {
  --s: 18px;  /* Kontroller størrelsen på spissene */
  --w: 350px; /* Ønsket bredde */

  width: var(--w);
  aspect-ratio: 1;
  object-fit: cover;
  padding: calc(2*var(--s));
  box-sizing: border-box;
  background: #165C7D; /* Nord Sekund 2 - default */
  --_m:#0000 0 calc(2*atan(.5)),#000 0 50%;
  mask:
    repeating-conic-gradient(from atan(2) at 50% var(--s),var(--_m))
     calc(2*var(--s)) calc(-1*var(--s))/calc(4*var(--s)) 100% intersect,
    repeating-conic-gradient(from atan(-.5) at var(--s),var(--_m))
     calc(-1*var(--s)) calc(2*var(--s))/100% calc(4*var(--s));

  /* Innholdsstyling */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  line-height: 1.6;
  /* Text color set dynamically by form-designer.html for WCAG 2.2 compliance */
}

/* ============================================
   5. DIAMANT (Diamond Pattern Box)
   ============================================
   Diamantmønster på kantene
*/
.nord-diamant {
  --s: 60px;  /* Kontroller størrelsen på spissene */
  --w: 350px; /* Ønsket bredde */

  width: round(var(--w), 2*var(--s));
  aspect-ratio: 1;
  object-fit: cover;
  padding: calc(.75*var(--s));
  box-sizing: border-box;
  background: #003D4C; /* Nord Sekund 1 - default */
  mask:
    conic-gradient(#000 0 0) 50%/calc(100% - var(--s)) calc(100% - var(--s)) no-repeat,
    repeating-conic-gradient(from 45deg,#0000 0,#000 1deg 89deg,#0000 25% 50%)
     calc(var(--s)/2) 0/var(--s) var(--s);

  /* Innholdsstyling */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  line-height: 1.6;
  /* Text color set dynamically by form-designer.html for WCAG 2.2 compliance */
}

/* ============================================
   6. HJØRNER (Corner Only)
   ============================================
   Ramme kun i hjørnene
*/
.nord-hjorner {
  --corner-size: 50px; /* Størrelse på hjørnene */
  --w: 350px; /* Ønsket bredde */

  border: 8px solid #EC5742; /* Nord Kontrast 1 - default */
  padding: 30px;
  width: var(--w);
  min-height: 200px;
  box-sizing: border-box;
  background: transparent content-box;
  mask:
    conic-gradient(#000 0 0) content-box,
    conic-gradient(at var(--corner-size) var(--corner-size),#0000 75%,#000 0)
    0 0/calc(100% - var(--corner-size)) calc(100% - var(--corner-size));

  /* Innholdsstyling */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  line-height: 1.6;
  /* No color defined - inherits Canvas default (adapts to dark mode) */
}

/* ============================================
   7. SIKKSAKK-KANT (Zig-Zag Edge)
   ============================================
   3D-effekt sikk-sakk kant på venstre eller høyre side
*/
.nord-sikksakk-kant {
  --s: 70px;  /* Kontroller størrelsen */
  --a: 90deg; /* Kontroller vinkelen */
  --d: 20px;  /* Dybden */
  --w: 100%;

  width: var(--w);
  min-height: 200px;
  padding: 40px;

  /* Innholdsstyling */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  line-height: 1.6;
}

/* Variant: Kant på venstre side */
.nord-sikksakk-kant.sikksakk-left {
  background:
    conic-gradient(from calc(90deg - var(--a)/2) at var(--d) 50%,
      #0008,#0000 1deg calc(var(--a) - 1deg),#0004 var(--a) calc(180deg + var(--a)/2),#0008 0)
      50%/100% var(--s) #00B0B9; /* Nord Prima 2 - default */
  mask:
    conic-gradient(from calc(90deg - var(--a)/2) at left,
      #0000,#000 1deg calc(var(--a) - 1deg),#0000 var(--a)) 50%/100% var(--s);
}

/* Variant: Kant på høyre side */
.nord-sikksakk-kant.sikksakk-right {
  background:
    conic-gradient(from calc(270deg - var(--a)/2) at calc(100% - var(--d)) 50%,
      #0008,#0000 1deg calc(var(--a) - 1deg),#0004 var(--a) calc(180deg + var(--a)/2),#0008 0)
      50%/100% var(--s) #00B0B9; /* Nord Prima 2 - default */
  mask:
    conic-gradient(from calc(270deg - var(--a)/2) at right,
      #0000,#000 1deg calc(var(--a) - 1deg),#0000 var(--a)) 50%/100% var(--s);
}

/* ============================================
   8. FILMSTRIPE (For bilder)
   ============================================
   Filmstripe-effekt, ideell for bilder
*/
.nord-filmstripe {
  --s: 12px; /* Kontroller størrelsen */
  --c: #222; /* Rammefarge (border og hull) - default svart som filmrull */
  --w: 350px; /* Ønsket bredde */

  width: var(--w);
  aspect-ratio: 1.25;
  background:
    conic-gradient(at 50% var(--s),var(--c) 75%,#0000 0)
    0 0/calc(2*var(--s)) calc(100% - var(--s)) padding-box;
  border: var(--s) solid var(--c);
  padding: calc(var(--s)*2.5) calc(var(--s)*1.5);
  box-sizing: content-box;
  position: relative;
  overflow: hidden;

  /* Valgfritt: Gammel film-effekt */
  /* filter: sepia(1) brightness(0.9) grayscale(.2); */
}

/* For bruk med img-tag */
.nord-filmstripe img {
  position: absolute;
  top: calc(var(--s)*2.5);
  left: calc(var(--s)*1.5);
  width: var(--w);
  height: calc(var(--w) / 1.25);
  object-fit: cover;
  display: block;
}

/* For tekst-only filmstrips uten bilder */
.nord-filmstripe:not(:has(img)) {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  line-height: 1.6;
}

/* ============================================
   9. FANE (Rounded Tab)
   ============================================
   Avrundet fane, for overskrifter/titler
   Kan plasseres i 4 retninger
*/
.nord-fane {
  --r: 25px; /* Kontroller radius */
  --w: 200px; /* Bredde */

  line-height: 1.8;
  padding: 15px 25px;
  width: var(--w);
  box-sizing: border-box;

  /* Innholdsstyling */
  font-weight: 600;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Variant: Topp venstre */
.nord-fane.fane-top-left {
  border-right: var(--r) solid transparent;
  border-radius: var(--r) calc(2*var(--r)) 0 0/var(--r);
  mask:
    radial-gradient(var(--r) at 100% 0,#0000 98%,#000 101%)
     100% 100%/var(--r) var(--r) no-repeat,
    conic-gradient(#000 0 0) padding-box;
  background: #00B0B9 border-box; /* Nord Prima 2 - default */
}

/* Variant: Topp høyre */
.nord-fane.fane-top-right {
  border-left: var(--r) solid transparent;
  border-radius: calc(2*var(--r)) var(--r) 0 0/var(--r);
  mask:
    radial-gradient(var(--r) at 0 0,#0000 98%,#000 101%)
     0 100%/var(--r) var(--r) no-repeat,
    conic-gradient(#000 0 0) padding-box;
  background: #00B0B9 border-box; /* Nord Prima 2 - default */
}

/* Variant: Bunn venstre */
.nord-fane.fane-bottom-left {
  border-right: var(--r) solid transparent;
  border-radius: 0 0 var(--r) calc(2*var(--r))/var(--r);
  mask:
    radial-gradient(var(--r) at 100% 100%,#0000 98%,#000 101%)
     100% 0/var(--r) var(--r) no-repeat,
    conic-gradient(#000 0 0) padding-box;
  background: #00B0B9 border-box; /* Nord Prima 2 - default */
}

/* Variant: Bunn høyre */
.nord-fane.fane-bottom-right {
  border-left: var(--r) solid transparent;
  border-radius: 0 0 calc(2*var(--r)) var(--r)/var(--r);
  mask:
    radial-gradient(var(--r) at 0 100%,#0000 98%,#000 101%)
     0 0/var(--r) var(--r) no-repeat,
    conic-gradient(#000 0 0) padding-box;
  background: #00B0B9 border-box; /* Nord Prima 2 - default */
}

/* ============================================
   10. RAMME (Simple Frame)
   ============================================
   Enkel ramme rundt innhold
*/
.nord-ramme {
  --w: 400px; /* Bredde */
  --border-width: 3px; /* Rammetykkelse */
  --border-radius: 8px; /* Hjørneradius */

  width: var(--w);
  min-height: 200px;
  padding: 20px;
  border: var(--border-width) solid #00B0B9; /* Nord Prima 2 - default */
  border-radius: var(--border-radius);
  box-sizing: border-box;
  background: transparent;

  /* Innholdsstyling */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  line-height: 1.6;
}

/* ============================================
   PREDEFINED SIZE VARIANTS
   ============================================
   Quick-use size classes that work without JavaScript
   Use these for simple cases where exact sizing isn't needed
*/

/* Bølgeboks sizes */
.nord-bolgeboks.liten { --s: 15px; --w: 280px; }
.nord-bolgeboks.medium { --s: 20px; --w: 360px; }
.nord-bolgeboks.stor { --s: 30px; --w: 480px; }

/* Skjellboks sizes */
.nord-skjellboks.liten { --r: 19px; --w: 260px; }
.nord-skjellboks.medium { --r: 25px; --w: 320px; }
.nord-skjellboks.stor { --r: 35px; --w: 420px; }

/* Frimerke sizes */
.nord-frimerke.liten { --r: 15px; --w: 240px; }
.nord-frimerke.medium { --r: 20px; --w: 300px; }
.nord-frimerke.stor { --r: 28px; --w: 400px; }

/* Sikksakk sizes */
.nord-sikksakk.liten { --s: 12px; --w: 280px; }
.nord-sikksakk.medium { --s: 18px; --w: 350px; }
.nord-sikksakk.stor { --s: 25px; --w: 450px; }

/* Diamant sizes */
.nord-diamant.liten { --s: 45px; --w: 280px; }
.nord-diamant.medium { --s: 60px; --w: 350px; }
.nord-diamant.stor { --s: 80px; --w: 480px; }

/* Hjørner sizes */
.nord-hjorner.liten { --corner-size: 40px; --w: 280px; }
.nord-hjorner.medium { --corner-size: 50px; --w: 350px; }
.nord-hjorner.stor { --corner-size: 65px; --w: 480px; }

/* Sikksakk-kant sizes */
.nord-sikksakk-kant.liten { --s: 50px; --w: 100%; }
.nord-sikksakk-kant.medium { --s: 70px; --w: 100%; }
.nord-sikksakk-kant.stor { --s: 95px; --w: 100%; }

/* Filmstripe sizes */
.nord-filmstripe.liten { --s: 10px; --w: 280px; }
.nord-filmstripe.medium { --s: 12px; --w: 350px; }
.nord-filmstripe.stor { --s: 16px; --w: 450px; }

/* Fane sizes */
.nord-fane.liten { --r: 18px; --w: 160px; }
.nord-fane.medium { --r: 25px; --w: 200px; }
.nord-fane.stor { --r: 32px; --w: 260px; }

/* Ramme sizes */
.nord-ramme.liten { --border-width: 2px; --w: 320px; }
.nord-ramme.medium { --border-width: 3px; --w: 400px; }
.nord-ramme.stor { --border-width: 5px; --w: 520px; }

/* ============================================
   DARK MODE KOMPATIBILITET
   ============================================
   Disse formene bruker hardkodede farger og
   vil ikke automatisk tilpasse seg dark mode.

   De er primært ment som dekorative elementer
   og ikke som innholdsbokser for tekst.

   For innholdsbokser med dark mode support,
   bruk Box Builder i stedet.
*/

/* ============================================
   RESPONSIV TILPASNING
   ============================================
   På små skjermer, reduser størrelse automatisk
*/
@media (max-width: 768px) {
  .nord-bolgeboks,
  .nord-skjellboks,
  .nord-frimerke,
  .nord-sikksakk,
  .nord-diamant,
  .nord-filmstripe {
    max-width: 100%;
    width: 100% !important;
  }

  .nord-hjorner {
    width: 100%;
    max-width: 100%;
  }

  .nord-sikksakk-kant {
    width: 100%;
  }

  .nord-ramme {
    width: 100%;
    max-width: 100%;
  }

  /* Reduce pattern sizes on mobile for better responsiveness */
  .nord-bolgeboks {
    --s: 12px; /* Smaller pattern allows tiling at narrower widths */
  }

  .nord-diamant {
    --s: 35px; /* Smaller pattern for mobile */
  }

  .nord-sikksakk {
    --s: 12px; /* Smaller zigzag pattern for mobile */
  }
}

/* ============================================
   TILGJENGELIGHET (WCAG 2.2)
   ============================================
   Form Designer verktøyet beregner automatisk
   optimal tekstfarge (sort eller hvit) basert på
   bakgrunnsfargeLuminans for å oppfylle WCAG 2.2 AA.

   WCAG 2.2 AA krever minimum 4.5:1 kontrast for normal tekst.

   Automatisk tekstfarge basert på luminans:
   - Lyse bakgrunner (#8FD6BD, #6CC24A, #FFA300): SORT tekst
   - Mørke bakgrunner (#003D4C, #165C7D, #00B0B9): HVIT tekst

   Tekstfargen settes automatisk via inline styles
   når du genererer HTML i form-designer.html.

   For manuell bruk: Legg til `color: black;` eller
   `color: white;` i inline style basert på bakgrunn.
*/

/* ============================================
   EKSEMPLER PÅ BRUK
   ============================================

   Eksempel 1: Bølgeboks med tilpasset størrelse og farge (mørk bakgrunn = hvit tekst)
   <div class="nord-bolgeboks" style="--s: 30px; --w: 400px; background: #00B0B9; color: #FFFFFF;">
     Din tekst her
   </div>

   Eksempel 2: Frimerke med Nord grønn farge (lys bakgrunn = sort tekst)
   <div class="nord-frimerke" style="--r: 25px; background: #6CC24A; color: #000000;">
     Viktig melding
   </div>

   Eksempel 3: Filmstripe med bilde
   <div class="nord-filmstripe" style="--s: 15px; --c: #222;">
     <img src="bilde.jpg" alt="Beskrivelse">
   </div>

   Eksempel 4: Fane som overskrift (lys bakgrunn = sort tekst)
   <div class="nord-fane" style="--r: 20px; background: #FFA300; color: #000000;">
     Kapittel 1
   </div>

   Eksempel 5: Hjørner med farget ramme (transparent bakgrunn = mørk tekst)
   <div class="nord-hjorner" style="--s: 50px; border-color: #EC5742; color: #2D3B45;">
     Innrammet innhold
   </div>

   MERK: Bruk form-designer.html verktøyet for å automatisk
   generere WCAG 2.2-kompatibel HTML med riktige tekstfarger.

*/