/* ==========================================================================
   Þekkingarmiðlun — site styles
   --------------------------------------------------------------------------
   Recreates the old `unei` template's com_content styling on Helix Ultimate
   2.2.10 / Joomla 6 / Bootstrap 5. Values are taken from the old site's
   templates/unei/css/template.css; selectors are written against the markup
   Helix Ultimate 2.2.10 actually emits.

   This file is the source of truth. It is applied to the template style's
   `custom_css` param (which templates/shaper_helixultimate/index.php prints
   inline) by cli/apply_custom_css.php — run that after editing.

   Palette: navy #080343 · accent #5950fe · link #0345bf · body #4c4b4d
   ========================================================================== */

/* --------------------------------------------------------------- header -- */

#sp-header {
    height: 80px;
    padding: 0 60px 0 40px;
}

#sp-header .logo {
    height: 80px;
    display: inline-flex;
    align-items: center;
    margin: 0;
}

#sp-header .logo a {
    font-size: 24px;
    line-height: 1;
    margin: 0;
    padding: 0;
}

@media (max-width: 991px) {
    #sp-header {
        padding: 0 16px;
    }
}

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    display: inline-block;
    padding: 0 25px;
    line-height: 80px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.1px;
    margin: 0;
}

/* Old site: every item is solid white, hover and active only thicken the
   glyphs (preset1.css) and the active item carries a 4px bar flush with the
   bottom of the 80px header (template.css .sp-megamenu-parent > li.active). */
.sp-megamenu-parent > li {
    position: relative;
}

.sp-megamenu-parent > li:not(:last-child) {
    margin-right: 10px;
}

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span,
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li:hover > span,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.active:hover > a {
    color: #fff;
}

.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li:hover > span,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.active:hover > a {
    text-shadow: 1px 0 0 currentColor;
}

/* Helix draws its own marker under the link; the old one sits on the item and
   spans its full width, so drop Helix's and add that one. */
.sp-megamenu-parent > li.active > a::after {
    content: none;
}

.sp-megamenu-parent > li.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background-color: #5950fe;
}

/* The old build narrowed the items twice on the way down so six labels stay on
   one line (template.css, the 1499px and 1199px blocks). Without these the new
   menu keeps its 25px padding all the way and wraps to two rows at 1366px -
   a very common laptop width, where the old site still fits. */
@media (max-width: 1499px) {
    .sp-megamenu-parent > li > a,
    .sp-megamenu-parent > li > span {
        padding: 0 15px;
    }
}

@media (max-width: 1199px) {
    .sp-megamenu-parent > li > a,
    .sp-megamenu-parent > li > span {
        padding: 0 5px;
        font-size: 15px;
    }
}

/* Helix makes the nav a flex item, so the column can squeeze it below its own
   content width and force a wrap; the old template floated it, which never
   shrank. Keep it at its natural width. */
#sp-header .sp-megamenu-wrapper {
    flex-shrink: 0;
}

/* ---------------------------------------------------------- header search -- */
/* A magnifier that swaps itself for the field when clicked, as on the old site
   (templates/unei/html/mod_search/default.php + js/main.js). mod_search is gone
   in Joomla 4+, so the same treatment is given to mod_finder by
   html/mod_finder/default.php and js/custom.js. */

#sp-header .sp-module.menu-right,
#sp-header .sp-module .mod-finder {
    margin: 0;
}

#sp-header .sp-module.menu-right search {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 80px;
}

/* The old build made #sp-menu-right itself the flex container and pushed the
   magnifier to its right edge, leaving a wide gap after the last menu item.
   Helix puts d-flex on the inner .sp-column instead, which defaults to
   flex-start and parks the icon right up against the menu. */
#sp-header #sp-menu-right > .sp-column {
    justify-content: flex-end;
}

#sp-header .search-toggle {
    padding: 0;
    border: 0;
    background: none;
    line-height: 1;
    font-size: 25px;
    color: #fff;
    cursor: pointer;
}

#sp-header .search-toggle:hover,
#sp-header .search-toggle:focus {
    color: #fff;
    box-shadow: none;
}

/* Until the magnifier is clicked the field takes up no room. */
#sp-header .mod-finder--collapsible {
    display: none;
}

#sp-header .search-open .search-toggle {
    display: none;
}

#sp-header .search-open .mod-finder--collapsible {
    display: block;
    width: 100%;
}

#sp-header .mod-finder--collapsible .js-finder-search-query {
    width: 100%;
    height: 42px;
    padding: 10px;
    font-size: 16px;
    color: rgba(76, 75, 77, 0.75);
    background: #fff;
    border: 1px solid #c3cad9;
    border-radius: 4px;
}

#sp-header .mod-finder--collapsible .js-finder-search-query:focus {
    outline: 0;
    box-shadow: none;
}

/* ----------------------------------------------------------- page title -- */

.sp-page-title {
    padding: 50px 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* No overlay: images/headers/header2.jpg already carries the purple wash on
   both sites, so tinting it again only darkens it. */

.sp-page-title > .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sp-page-title .sp-page-title-heading,
.sp-page-title .sp-page-title-sub-heading {
    margin: 0;
    padding: 0;
    color: #fff;
}

.sp-page-title .sp-page-title-heading {
    font-size: 45px;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: -1.37px;
    max-width: 57.3%;
}

@media (max-width: 767px) {
    .sp-page-title {
        padding: 48px 0;
    }

    .sp-page-title .sp-page-title-heading {
        font-size: 30px;
        letter-spacing: -0.6px;
        max-width: 100%;
    }
}

/* ------------------------------------------------------------ main body -- */

#sp-main-body {
    padding: 100px 0;
}

/* SP Page Builder pages bring their own section padding. */
.com-sppagebuilder #sp-main-body {
    padding: 0;
}

/* ---------------------------------------------------------------------------
   Course articles (Námskeið / Á döfinni)

   These carry their own full-bleed SP Page Builder hero inside the article
   body. On the old site they were rendered by J2Store's product view, which
   the template stripped back to just that layout - no page title band, no
   share rail, no container gutters
   (templates/unei/css/template.css, .j2store-single-product-view block). They
   are com_content articles here, so they are matched by the page builder
   wrapper the SPPB content plugin puts around the body.
   --------------------------------------------------------------------------- */

body:has(.article-details #sp-page-builder) #sp-section-2,
body:has(.article-details #sp-page-builder) .unei-blog-details > .row > .col-sm-2 {
    display: none;
}

body:has(.article-details #sp-page-builder) #sp-main-body {
    padding: 0;
}

body:has(.article-details #sp-page-builder) #sp-main-body > .container,
body:has(.article-details #sp-page-builder) #sp-main-body > .container > .container-inner {
    max-width: 100%;
    padding: 0;
}

body:has(.article-details #sp-page-builder) .unei-blog-details > .row > .col-sm-8 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
}

body:has(.article-details #sp-page-builder) .article-details .article-ratings-social-share {
    display: none;
}

/* Both of these are empty on a course page but still reserve space, which
   shows up as a gap between the header and the top of the hero. */
body:has(.article-details #sp-page-builder) .article-details .article-can-edit,
body:has(.article-details #sp-page-builder) .article-details .article-header {
    margin: 0;
}

/* ------------------------------------------------- blog / category lists -- */

.article-list .article {
    margin-bottom: 30px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #fff;
    transition: box-shadow 0.3s ease;
    height: calc(100% - 30px);
}

.article-list .article:hover {
    box-shadow: 0 50px 60px -20px rgba(0, 0, 0, 0.15);
}

/* Helix sets `margin:-20px` here to bleed the image out of its own card
   padding; this card puts the padding on .article-body instead, so reset it
   and let the image sit flush against the card edge. */
.article-list .article .article-intro-image,
.article-list .article .article-featured-video,
.article-list .article .article-featured-audio,
.article-list .article .article-feature-gallery {
    float: none;
    width: 100%;
    margin: 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.article-list .article .article-intro-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

.article-list .article .article-body {
    padding: 32px 40px 28px;
    display: flex;
    flex-direction: column;
}

@media (max-width: 767px) {
    #sp-main-body {
        padding: 48px 0;
    }

    .article-list .article .article-body {
        padding: 24px 22px 20px;
    }

    .article-list .article .article-header h1,
    .article-list .article .article-header h2,
    .article-list .article .article-header h1 a,
    .article-list .article .article-header h2 a {
        font-size: 20px;
    }
}

/* The old site printed the date above the title; Helix emits it after the
   header, so reorder rather than override the layout. */
.article-list .article .article-body .article-info {
    order: -1;
    margin-bottom: 10px;
}

.article-list .article .article-header {
    margin: 0;
}

.article-list .article .article-header h1,
.article-list .article .article-header h2 {
    font-size: 24px;
    margin: 0 0 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.article-list .article .article-header h1 a,
.article-list .article .article-header h2 a {
    color: #080343;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.38;
    letter-spacing: -0.42px;
}

.article-list .article .article-header h1 a:hover,
.article-list .article .article-header h2 a:hover,
.article-list .article .article-header h1 a:focus,
.article-list .article .article-header h2 a:focus {
    color: #044cd0;
}

.article-list .article .article-introtext {
    color: #4c4b4d;
    line-height: 1.75;
}

.article-list .article .readmore {
    margin-top: 18px;
}

.article-list .article .readmore a {
    color: #5950fe;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.3px;
    text-decoration: none;
}

.article-list .article .readmore a:hover,
.article-list .article .readmore a:focus {
    color: #044cd0;
}

/* Námskeið (itemid 336) and Á döfinni (itemid 352) are image + title only.
   Their articles still carry an empty introtext element, so hide it rather
   than relying on it being absent. */
.itemid-336 .article-list .article .article-introtext,
.itemid-352 .article-list .article .article-introtext {
    display: none;
}

.itemid-336 .article-list .article .article-header h1,
.itemid-336 .article-list .article .article-header h2,
.itemid-352 .article-list .article .article-header h1,
.itemid-352 .article-list .article .article-header h2 {
    margin-bottom: 0;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 20px;
}

.itemid-336 .article-list .article .article-header h1 a,
.itemid-336 .article-list .article .article-header h2 a,
.itemid-352 .article-list .article .article-header h1 a,
.itemid-352 .article-list .article .article-header h2 a {
    font-size: 20px;
}

.itemid-336 .article-list .article .article-body,
.itemid-352 .article-list .article .article-body {
    padding: 24px 26px;
}

/* Fyrirlestrar is a plain link list (num_links, no intro). Joomla emits it as
   <ol class="com-content-blog__links">, so drop the numbering. */
.items-more .com-content-blog__links,
.com-content-blog__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.com-content-blog__links li {
    border: 0;
    padding: 0;
    margin: 0;
}

.com-content-blog__links li + li {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.com-content-blog__links li a {
    display: block;
    padding: 16px 0;
    color: #080343;
    font-size: 16px;
    text-decoration: none;
}

.com-content-blog__links li a:hover,
.com-content-blog__links li a:focus {
    color: #5950fe;
}

.items-more .items-more-title,
.items-more > h3 {
    display: none;
}

/* ------------------------------------------------------- article detail -- */

.article-info {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.article-info .published time {
    font-size: 16px;
    font-weight: normal;
    color: #464464;
}

/* Carried over from the old site's custom CSS: DATE_FORMAT_LC3 renders the
   month capitalised, and the design wants it lower case. */
.article-list .article-info .published time,
.sppb-article-meta > span,
.sppb-article-meta > time {
    text-transform: lowercase;
}

/* The "Birt" label only appears on detail pages. */
.article-info .published .published-date-title {
    display: none;
}

/* Author was remapped to the site admin during migration and the old site did
   not show it; keep it hidden along with hits and category. */
.article-info .createdby,
.article-info .category-name,
.article-info .hits {
    display: none;
}

/* ---------------------------------------------------------------------------
   Article grid and the "Deila" rail

   html/com_content/article/default.php restores the old two column layout:
   a two column share rail, eight columns of article, two columns of air on the
   right. Metrics from templates/unei/css/template.css (.article-social-share).
   --------------------------------------------------------------------------- */

.unei-blog-details-social-share .share-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.88;
    letter-spacing: -0.58px;
    color: #221f49;
    display: block;
    margin-bottom: 25px;
}

/* Helix styles the icons as bordered 34px circles in a row; the old site drew
   bare glyphs in a column, so the box is reset first. */
.unei-blog-details-social-share .article-social-share,
.unei-blog-details-social-share .social-share-icon {
    float: none;
    width: auto;
}

.article-social-share .social-share-icon ul {
    padding-left: 25px;
    list-style: none;
    margin: 0;
}

.article-social-share .social-share-icon ul li {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
}

.article-social-share .social-share-icon ul li:not(:last-child) {
    margin-bottom: 25px;
}

.article-social-share .social-share-icon ul li a {
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: left;
    line-height: inherit;
    font-size: 18px;
    color: rgba(101, 100, 126, 0.5);
}

.article-social-share .social-share-icon ul li a:hover,
.article-social-share .social-share-icon ul li a:focus {
    color: #65647e;
    /* preset1.css paints a #5950fe disc on hover for Helix's round buttons */
    background: none;
}

/* Helix also prints the icons in a row above the article body, inside a bar
   with rules above and below. The rail is the one the old site showed, so the
   in-flow copy goes and the bar collapses. */
.article-details .article-ratings-social-share .social-share-block {
    display: none;
}

.article-details .article-ratings-social-share {
    border: 0;
    margin: 0;
    padding: 0;
}

.article-details .article-info {
    justify-content: flex-end;
}

@media (max-width: 991px) {
    .unei-blog-details-social-share .share-title {
        font-size: 20px;
    }

    .article-social-share .social-share-icon ul li:not(:last-child) {
        margin-bottom: 15px;
    }
}

@media (max-width: 767px) {
    .unei-blog-details-social-share .share-title {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .article-social-share .social-share-icon ul {
        padding-left: 0;
    }

    .article-social-share .social-share-icon ul li:not(:last-child) {
        margin-bottom: 10px;
    }
}

/* Below 576px Bootstrap stacks the columns, so the rail lies flat above the
   article, as it did before. */
@media (max-width: 575px) {
    .unei-blog-details-social-share .share-title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .unei-blog-details-social-share {
        margin-bottom: 20px;
    }

    .article-social-share .social-share-icon ul li {
        display: inline-block;
    }

    .article-social-share .social-share-icon ul li:not(:last-child) {
        margin-right: 10px;
        margin-bottom: 0;
    }
}


.article-details .article-info {
    margin-bottom: 1rem;
    align-items: center;
}

.article-details .article-info .published {
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.4px;
    color: #464464;
}

.article-details .article-info .published .published-date-title {
    display: inline-block;
    font-weight: 600;
}

.article-details .article-info .published time {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.4px;
}

/* The title band already prints the article title (see features/title.php), so
   the in-body heading would be a duplicate - as on the old site, hide it. */
.view-article .article-details > .article-header,
.view-article .article-details .article-header h1 {
    display: none;
}

.article-details .article-header h1,
.article-details .article-header h2 {
    font-size: 2.25rem;
}

.article-details .article-full-image {
    text-align: center;
    margin-bottom: 60px;
}

.article-details .article-full-image img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

/* Body copy in articles */
.article-details .article-body,
.article-list .article .article-introtext {
    color: #4c4b4d;
}

.article-details .article-body p {
    line-height: 1.8;
    margin-bottom: 1.4rem;
}

/* ------------------------------------------------------------ sidebars --- */

#sp-left .sp-module,
#sp-right .sp-module {
    margin-top: 50px;
    border: 1px solid #f3f3f3;
    padding: 30px;
    border-radius: 3px;
}

/* ---------------------------------------------------------------------------
   Póstlisti band + footer

   Values from the old unei build: template.css #sp-bottom / #sp-footer for the
   metrics and presets/preset1.css for the colours.
   --------------------------------------------------------------------------- */

/* The mailing-list strip sat on a solid accent band. */
#sp-bottom-top {
    background-color: #5950fe;
}

/* The optin addon still generates the old field and button metrics, but this
   build of SP Page Builder now ships rules that outrank them, so they are
   restated here. The send button sits inside the field on .button-wrap. */
#sp-bottom-top .sppb-section.footer-subscription .sppb-optin-form input {
    height: 60px;
    /* SP Page Builder ships input[type="email"]:not(.form-control){padding:.5rem!important},
       which flattens the addon's own padding. */
    padding: 20px 50px 20px 25px !important;
    border: 0;
    border-radius: 6px;
}

.footer-subscription .sppb-optin-form .button-wrap .sppb-btn {
    padding: 15px 23px 0 20px;
    font-size: 24px;
    background-color: #fff;
    color: #5950fe;
    border-color: transparent;
}

.footer-subscription .sppb-optin-form .button-wrap .sppb-btn:hover,
.footer-subscription .sppb-optin-form .button-wrap .sppb-btn:focus {
    background-color: #fff;
    color: #044cd0;
    border-color: transparent;
}

/* --- footer proper --- */

#sp-bottom {
    padding: 100px 0 70px;
    color: rgba(255, 255, 255, 0.7);
}

#sp-bottom .sp-module .sp-module-title {
    font-size: 18px;
    font-weight: normal;
    margin: 0 0 30px;
    color: rgba(255, 255, 255, 0.5);
}

#sp-bottom ul,
#sp-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#sp-bottom .sp-module ul > li {
    display: block;
    margin-bottom: 15px;
}

#sp-bottom .sp-module ul > li:last-child {
    margin-bottom: 0;
}

#sp-bottom .sp-module ul > li > a {
    display: block;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    text-decoration: none;
}

/* Old site: footer links are already white, so hovering does not recolour
   them - preset1.css sets the same #fff for link, hover, focus and active. */
#sp-bottom a,
#sp-footer a,
#sp-bottom a:hover,
#sp-footer a:hover,
#sp-bottom a:focus,
#sp-footer a:focus,
#sp-bottom a:active,
#sp-footer a:active {
    color: #fff;
}

#sp-bottom .social-icons > li a {
    color: rgba(255, 255, 255, 0.5);
}

#sp-bottom .social-icons > li a:hover {
    color: #fff;
}

#sp-footer {
    padding: 15px 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Helix wraps the row in .container-inner and puts the rule and padding there;
   the old template carried both on #sp-footer itself. */
#sp-footer .container-inner {
    padding: 0;
    border-top: 0;
}

#sp-footer ul.menu {
    display: inline-block;
    margin: 0;
}

#sp-footer ul.menu li {
    display: inline-block;
    margin: 0;
}

#sp-footer ul.menu li:last-child {
    margin-left: 60px;
}

#sp-footer ul.menu li a,
#sp-footer #sp-footer2 a {
    display: block;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

#sp-footer #sp-footer2 {
    text-align: right;
}

#sp-footer2 ul {
    display: inline-block;
}

@media (max-width: 1199px) {
    #sp-bottom {
        padding: 80px 0 50px;
    }

    #sp-bottom .sp-module ul > li {
        margin-bottom: 10px;
    }
}

@media (max-width: 991px) {
    #sp-bottom {
        padding: 60px 0 40px;
    }

    #sp-bottom .sp-module .sp-module-title {
        margin: 0 0 20px;
    }

    #sp-footer ul.menu li:last-child {
        margin-left: 30px;
    }
}

@media (max-width: 767px) {
    #sp-bottom {
        padding: 40px 0;
    }

    #sp-bottom .sp-module .sp-module-title {
        font-size: 16px;
        margin: 0 0 15px;
    }

    #sp-bottom .sp-module ul > li > a {
        font-size: 14px;
    }

    #sp-footer ul.menu li:last-child {
        margin-left: 20px;
    }

    #sp-footer #sp-footer2 a {
        font-size: 14px;
    }

    #sp-footer1 {
        margin-bottom: 10px;
    }

    #sp-footer1 .sp-column,
    #sp-footer2 .sp-module-content {
        text-align: center;
    }
}

/* ------------------------------------------------------------- generic --- */

a {
    text-decoration: none;
}

.btn-primary,
.sppb-btn-primary {
    background-color: #5950fe;
    border-color: #5950fe;
}

.btn-primary:hover,
.sppb-btn-primary:hover {
    background-color: #044cd0;
    border-color: #044cd0;
}

/* Pagination */
.pagination {
    justify-content: center;
    margin-top: 40px;
}

.pagination .page-link {
    color: #080343;
    border-color: rgba(0, 0, 0, 0.12);
}

.pagination .active .page-link {
    background: #5950fe;
    border-color: #5950fe;
    color: #fff;
}

/* Reading progress bar, as configured on the old site */
.sp-reading-progress-bar {
    background: #0345bf;
    height: 5px;
}

/* ---------------------------------------------------------------------------
   Course price and registration button in the SP Page Builder hero.

   plg_content_skraning renders these at the bottom of the article and its
   relocate.js moves them into the .unei-product-price-area and
   .unei-product-button-area placeholders that all 64 course layouts carry.
   Values measured off the old unei template on the live site, so the band
   looks exactly as it did.
   --------------------------------------------------------------------------- */
.unei-product-price-area .sale-price {
    font-size: 22.4px;
    line-height: 26px;
    font-weight: 700;
    color: #fff;
    padding: 0;
    margin: 0;
}

/* The addon's own heading is empty here - the date lives in the body text. SP
   Page Builder now renders it inline-block, so the empty heading still draws a
   full line box and pushes the date away from the price. The old build had it
   as a block, where an empty heading takes no room and the pair sits centred
   against the "Skrá mig" button. */
.unei-product-price-area .sppb-addon-title {
    display: block;
}

/* Once the hero columns stack, price and date sit left above the button, as
   on the old site. There the addon carried .sppb-text-right and each layout's
   CSS reset .sppb-text-right to left under 767px. SP Page Builder 6 turned the
   alignment into "#sppb-addon-<id> .sppb-addon-text-block{text-align:right}"
   with no mobile value and dropped the class, so that reset matches nothing
   and the pair stayed flush right while the button went left. #sp-page-builder
   outranks the per-addon id rule without !important. */
@media (max-width: 767.98px) {
    #sp-page-builder .sppb-addon-text-block.unei-product-price-area {
        text-align: left;
    }
}

.skraning-addtocart-form {
    margin: 0;
}

.skraning-cart-button,
.skraning-addtocart-form .skraning-cart-button {
    display: inline-block;
    padding: 12px 33px 12px 34px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: #fff;
    background-color: #5950fe;
    border: 1px solid transparent;
    border-radius: 6px;
    text-decoration: none;
    position: relative;
    z-index: 1;
}

.skraning-cart-button:hover,
.skraning-cart-button:focus,
.skraning-cart-button:active {
    background-color: #4038e0;
    color: #fff;
    box-shadow: none;
    text-decoration: none;
}

/* Registration closed: same footprint, muted, not clickable. */
.skraning-closed .skraning-closed-label {
    display: inline-block;
    padding: 12px 33px 12px 34px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 6px;
}

/* Layout for the brief moment before js/relocate.js moves the price and button
   into the hero, and for a course article whose layout has no placeholders -
   there relocate.js drops the block, as the old site did. */
.skraning-block-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.skraning-block-wrap .sale-price {
    font-size: 22.4px;
    font-weight: 700;
    color: #080343;
}

/* ---------------------------------------------------------------------------
   Námskeið listing: category filter + search, recreating the old J2Store
   product-list chrome around the category blog. Rendered by
   templates/shaper_helixultimate/overrides/com_content/category/blog.php.
   Measurements taken from the old unei template.
   --------------------------------------------------------------------------- */
.namskeid-browser {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.namskeid-filters {
    flex: 0 0 25%;
    max-width: 25%;
}

.namskeid-results {
    flex: 1 1 auto;
    min-width: 0;
}

.namskeid-filter-group {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(70, 68, 100, .1);
}

.namskeid-filter-heading {
    font-size: 16px;
    font-weight: 600;
    color: #464464;
    letter-spacing: -0.3px;
    line-height: 40px;
    margin-bottom: 20px;
    display: block;
}

.namskeid-category-list {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.namskeid-category {
    margin-bottom: 10px;
}

.namskeid-category:last-child {
    margin-bottom: 0;
}

.namskeid-category a {
    color: #666;
    padding: 5px 0;
    font-size: 14px;
    position: relative;
    text-decoration: none;
    display: inline-block;
}

/* The tick box is drawn, as it was on the old site - there is no real checkbox. */
.namskeid-category a::before {
    background: #eee;
    content: "";
    height: 16px;
    width: 16px;
    border: 1px solid #cacaca;
    border-radius: 2px;
    display: inline-block;
    position: relative;
    top: 3.5px;
    margin-right: 10px;
}

.namskeid-category.active a::after {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f00c";
    position: absolute;
    left: 3px;
    top: 5px;
    font-size: 12px;
    color: #5950fe;
}

.namskeid-category a:hover,
.namskeid-category a:focus {
    background: transparent;
    color: #5950fe;
}

/* --- search row --- */
.namskeid-search {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 30px;
}

.namskeid-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    font-size: 16px;
    color: #4c4b4d;
    background: #fff;
    border: 1px solid #c3cad9;
    border-radius: 4px;
}

.namskeid-search-input:focus {
    border-color: #5950fe;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(89, 80, 254, .15);
}

.namskeid-search-button,
.namskeid-search-clear {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 22px;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    background-color: #5950fe;
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;
}

.namskeid-search-button:hover,
.namskeid-search-button:focus,
.namskeid-search-clear:hover,
.namskeid-search-clear:focus {
    background-color: #4038e0;
    color: #fff;
    text-decoration: none;
}

@media (max-width: 767px) {
    .namskeid-browser {
        flex-direction: column;
        gap: 0;
    }

    .namskeid-filters {
        flex-basis: auto;
        max-width: 100%;
        width: 100%;
    }

    .namskeid-search {
        flex-wrap: wrap;
    }

    .namskeid-search-input {
        flex-basis: 100%;
    }
}
/* ---------------------------------------------------------------------------
   Container width

   The old build ran on Bootstrap 4, whose widest container step is 1140px.
   Bootstrap 5 adds an xxl step at 1400px that widens everything to 1320px, so
   every section and reading column on the new site sits 180px wider than it
   was designed for. Cap it back.
   --------------------------------------------------------------------------- */

@media (min-width: 1400px) {
    .container,
    .sppb-row-container {
        max-width: 1140px;
    }
}


/* ---------------------------------------------------------------------------
   Base typography

   The old template set these on the document and everything else was measured
   against them (templates/unei/css/template.css, top of file). Helix 2.2.10
   leaves them at the Bootstrap defaults, which is why copy throughout the new
   build sits tighter than the old one.
   --------------------------------------------------------------------------- */

body,
p {
    line-height: 1.81;
    letter-spacing: -0.3px;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
    letter-spacing: -0.39px;
}

/* ---------------------------------------------------------------------------
   SP Page Builder buttons

   Ported from templates/unei/css/template.css (`body .sppb-btn` block). Without
   it the addons fall back to SP Page Builder's own grey `.sppb-btn-default`,
   which is what "Sjá allar greinar" and "Sjá öll námskeið" were showing.
   --------------------------------------------------------------------------- */

body .sppb-btn {
    padding: 12px 33px 12px 34px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.3px;
    border-color: transparent;
    position: relative;
    z-index: 1;
}

body .sppb-btn:hover,
body .sppb-btn:focus,
body .sppb-btn:active {
    box-shadow: none;
}

body .sppb-btn.sppb-btn-3d {
    padding-top: 14px;
    padding-bottom: 13px;
}

body .sppb-btn.sppb-btn-xlg {
    padding: 14px 40px 15px 41px;
    font-size: 18px;
}

body .sppb-btn.sppb-btn-lg {
    padding: 12px 40px 12px 41px;
}

body .sppb-btn.sppb-btn-sm {
    padding: 9px 25px 11px 26px;
    font-size: 15px;
}

body .sppb-btn.sppb-btn-xs {
    padding: 6px 14px;
    font-size: 14px;
}

body .sppb-btn.sppb-btn-default {
    background-color: #5950fe;
    color: #fff;
    border-color: #5950fe;
}

body .sppb-btn.sppb-btn-default:hover,
body .sppb-btn.sppb-btn-default:focus,
body .sppb-btn.sppb-btn-default:active {
    background-color: #044cd0;
    border-color: #044cd0;
    color: #fff;
}

body .sppb-btn.sppb-btn-default.sppb-btn-rounded {
    border-radius: 6px;
}

body .sppb-btn.sppb-btn-default.sppb-btn-gradient {
    background-image: linear-gradient(0deg, #5950fe 0, #a7b8c7 100%);
    color: #fff;
}

body .sppb-btn.sppb-btn-default.sppb-btn-outline {
    background-color: transparent;
    color: #5950fe;
    border-color: #5950fe;
}

body .sppb-btn.sppb-btn-default.sppb-btn-outline:hover {
    background-color: #5950fe;
    color: #fff;
}

body .sppb-btn.sppb-btn-default.sppb-btn-outline.btn-white {
    border-color: #fff;
    color: #fff;
}

body .sppb-btn.sppb-btn-default.sppb-btn-outline.btn-white:hover {
    color: #fff;
    background-color: #5950fe;
    border-color: #5950fe;
}

body .sppb-btn.sppb-btn-default.sppb-btn-3d {
    border-bottom-color: #4385da;
}

body .sppb-btn.sppb-btn-default.sppb-btn-3d:hover {
    border-bottom-color: #5950fe;
}

body .sppb-btn.sppb-btn-link {
    padding: 0;
    color: #5950fe;
}

body .sppb-btn.sppb-btn-link:hover {
    text-decoration: underline;
}

@media (max-width: 991px) {
    body .sppb-btn {
        padding: 10px 20px;
        font-size: 15px;
    }

    body .sppb-btn.sppb-btn-3d {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

@media (max-width: 767px) {
    body .sppb-btn {
        padding: 9px 16px;
        font-size: 14px;
    }

    body .sppb-btn.sppb-btn-3d {
        padding-top: 9px;
        padding-bottom: 9px;
    }
}

/* ---------------------------------------------------------------------------
   SP Page Builder article listings
   --------------------------------------------------------------------------- */

/* The old addon ran the intro through strip_tags(); this one keeps the markup,
   so any <strong> the editor left in an article turned the teaser bold. Render
   the tags that survive as plain running text instead. */
.sppb-article-introtext strong,
.sppb-article-introtext b {
    font-weight: inherit;
}

.sppb-article-introtext p {
    display: inline;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   "Á döfinni" ticker

   The date chip and the prev/next arrows are laid out independently, and with
   this build's wider arrow glyphs they end up touching. Shift the chip left so
   the pair reads as it did on the old site.
   --------------------------------------------------------------------------- */
.sppb-articles-ticker .ticker-date-time-content-wrap {
    right: 30px;
}

/* ---------------------------------------------------------------------------
   Offcanvas toggler

   Helix shows the burger at every width; the old build hid it on desktop
   (presets/preset1.css) and only brought it back under 992px, where the
   megamenu itself is hidden. The header search follows the old custom.css and
   drops out just below that.
   --------------------------------------------------------------------------- */
#offcanvas-toggler {
    /* Helix puts .d-flex on the element, so this has to outrank it. */
    display: none !important;
}

@media (max-width: 991px) {
    #offcanvas-toggler {
        display: flex !important;
    }
}

@media (max-width: 1000px) {
    #sp-menu-right {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Offcanvas (mobile) menu

   Ported from templates/unei/css/template.css (the .offcanvas-* block, and the
   body.ltr rules that go with it) and presets/preset1.css.
   --------------------------------------------------------------------------- */

/* The burger sits on the navy header. The old build drew it as a white Font
   Awesome glyph; this one draws three spans, which default to black. */
#offcanvas-toggler .burger-icon > span {
    background-color: #fff;
}

.offcanvas-menu {
    padding-top: 50px;
}

.offcanvas-menu .offcanvas-inner {
    padding: 30px;
}

/* The old close control was a small dark disc with a white cross. Helix builds
   the cross by rotating the same three spans, so only the disc is missing. */
.offcanvas-menu .close-offcanvas {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 100%;
    background: #333;
}

.offcanvas-menu .close-offcanvas:hover,
.offcanvas-menu .close-offcanvas:focus {
    background: #666;
}

/* Helix forms the cross out of three rotated spans, with offsets tuned for a
   25px icon that land off-centre in a 24px disc. Draw the glyph instead, which
   is what the old build did (fa fa-remove at 14px). */
.offcanvas-menu .close-offcanvas .burger-icon {
    display: none;
}

.offcanvas-menu .close-offcanvas::before {
    content: "\f00d"; /* fa-xmark */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
    color: #fff;
}

/* The row Helix wraps the close control in is now empty of layout duty. */
.offcanvas-menu > .d-flex:has(.close-offcanvas) {
    padding: 0 !important;
}

/* --- the list itself --- */

.offcanvas-menu .offcanvas-inner .sp-module ul.menu {
    margin: 0;
}

.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li > a,
.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li > span,
.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li.active > a,
.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li.current > a {
    display: block;
    padding: 0.125rem 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.81;
    color: #252525;
}

.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li > a:hover,
.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li > a:focus,
.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li > span:hover,
.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li > span:focus {
    color: #5950fe;
}

.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li ul {
    margin-left: 10px;
}

.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li ul li a {
    font-size: 0.875rem;
    color: rgba(37, 37, 37, 0.8);
}

/* --- submenu toggle --- */

/* Helix emits <span class="menu-toggler"> on every parent but its ::after
   carries no glyph, so the control is invisible. Draw a chevron that turns
   over when the branch opens. (The old build used a plus/minus disc here.) */
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .nav-header > .menu-toggler,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent li.menu-parent .menu-toggler {
    right: 0;
    padding: 0 0 0 12px;
    font-size: 1rem;
    line-height: 1;
    color: rgba(37, 37, 37, 0.5);
}

.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler::after,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler::after,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .nav-header > .menu-toggler::after,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent li.menu-parent .menu-toggler::after {
    content: "\f078"; /* fa-chevron-down */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    display: block;
    transition: transform 0.2s ease;
}

.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent.menu-parent-open > a > .menu-toggler::after,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent.menu-parent-open > .menu-separator > .menu-toggler::after,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent.menu-parent-open > .nav-header > .menu-toggler::after,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent li.menu-parent.menu-parent-open .menu-toggler::after {
    content: "\f078";
    transform: rotate(180deg);
}

/* --- search box, matching the old offcanvas field --- */

.offcanvas-menu .offcanvas-inner .mod-finder .js-finder-search-query {
    width: 100%;
    height: 42px;
    padding: 10px;
    font-size: 16px;
    color: rgba(76, 75, 77, 0.75);
    background: #fff;
    border: 1px solid #c3cad9;
    border-radius: 4px;
}