Add FAQ page template and improve button styling

Update frontpage content and styling Add metadata for new FAQ pages
Implement consistent button styling across templates

custom/templates/list-card-grid.php

@@ -26,9 +26,9 @@
                 <?php endif; ?>
                 <div class="card-actions">
                     <?php if (!empty($item['pdf'])): ?>
-                        <a href="<?= htmlspecialchars($item['pdf']) ?>" class="btn-download" download>Last ned PDF</a>
+                        <a href="<?= htmlspecialchars($item['pdf']) ?>" class="button" download>Last ned PDF</a>
                     <?php endif; ?>
-                    <a href="<?= htmlspecialchars($item['url']) ?>" class="btn-read-more">Les mer</a>
+                    <a href="<?= htmlspecialchars($item['url']) ?>" class="button">Les mer</a>
                 </div>
             </article>
         <?php endforeach; ?>
@@ -71,22 +71,6 @@ main > section.list-card-grid-wrapper {
 
       a {
         margin-top: 1.3rem;
-        border-radius: 1rem;
-        background-color: var(--color-grey);
-        padding: 0.35rem 1rem;
-        color: white;
-        text-decoration: none;
-
-        &:hover {
-          background-color: var(--color-green);
-          color: white;
-        }
-
-        &:focus {
-          outline: 0.1rem var(--color-green) solid;
-          color: var(--color-grey);
-          background-color: white;
-        }
       }
     }
   }

custom/templates/list-faq.php

@@ -0,0 +1,141 @@
+<?php if (!empty($pageContent)): ?>
+    <article class="list-intro">
+        <?= $pageContent ?>
+    </article>
+<?php endif; ?>
+
+<section class="list-faq-wrapper">
+    <div class="list-faq">
+        <?php foreach ($items as $item): ?>
+            <details class="faq-item">
+                <summary>
+                    <h2><?= htmlspecialchars($item['title']) ?></h2>
+                    <span class="toggle-icon" aria-hidden="true"></span>
+                </summary>
+                <div class="faq-content">
+                    <?php if ($item['summary']): ?>
+                        <p><strong>Kort oppsumert:</strong> <?= htmlspecialchars($item['summary']) ?></p>
+                    <?php endif; ?>
+                    <a href="<?= htmlspecialchars($item['url']) ?>" class="button">Les hele svaret</a>
+                </div>
+            </details>
+        <?php endforeach; ?>
+    </div>
+</section>
+
+<style>
+main > section.list-faq-wrapper {
+  margin-top: 1.3em;
+
+  .list-faq {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .faq-item {
+    background-color: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    transition: border-color 0.2s ease;
+
+    &:hover {
+      border-color: var(--color-green);
+    }
+
+    &[open] {
+      border-color: var(--color-green);
+    }
+  }
+
+  summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.5rem;
+    cursor: pointer;
+    list-style: none;
+    user-select: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    h2 {
+      margin: 0;
+      font-size: 1.3rem;
+      font-weight: 400;
+      color: var(--color-grey);
+      flex: 1;
+    }
+
+    .toggle-icon {
+      width: 1.5rem;
+      height: 1.5rem;
+      flex-shrink: 0;
+      position: relative;
+      margin-left: 1rem;
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        background-color: var(--color-green);
+        transition: transform 0.3s ease;
+      }
+
+      &::before {
+        top: 50%;
+        left: 0;
+        right: 0;
+        height: 2px;
+        transform: translateY(-50%);
+      }
+
+      &::after {
+        left: 50%;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        transform: translateX(-50%);
+      }
+    }
+
+    &:hover h2 {
+      color: var(--color-green);
+    }
+  }
+
+  .faq-item[open] summary .toggle-icon::after {
+    transform: translateX(-50%) rotate(90deg);
+    opacity: 0;
+  }
+
+  .faq-content {
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    animation: slideDown 0.3s ease;
+
+    p {
+      margin-top: 0;
+      color: var(--color-grey);
+      line-height: 1.6;
+    }
+
+    .button {
+      margin-top: 1rem;
+    }
+  }
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-0.5rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+</style>

custom/templates/list.php

@@ -23,6 +23,7 @@
             <?php if ($item['summary']): ?>
                 <p><?= htmlspecialchars($item['summary']) ?></p>
             <?php endif; ?>
+            <a href="<?= htmlspecialchars($item['url']) ?>" class="button">Les mer</a>
         </article>
     <?php endforeach; ?>
 </article>
@@ -44,6 +45,11 @@ main > article {
     h1 {
       margin-top: 1rem;
     }
+
+    > .button {
+      margin-left: 1rem;
+      margin-top: 1rem;
+    }
   }
 }
 </style>