/**
 * TransferJet — CMS page layout.
 *
 * Semantic classes for content authored in the database (CMS pages, the
 * no-route page). Tailwind cannot see database markup — its @source globs only
 * cover theme .phtml/.xml — so utility classes used in CMS content would be
 * pruned from the build and silently fail in production. Defining named classes
 * here means authors edit copy freely while the styling stays versioned.
 *
 * Loaded via layout XML rather than the Tailwind build, so edits show on reload
 * without a rebuild while this is still being iterated. Fold into the build once
 * settled.
 */

/* --- no-route (404) --------------------------------------------------------
 * Ported from the Laravel storefront's refactored 404: two columns from lg with
 * the art on the right and text on the left; stacked on mobile with text first.
 * The original JetTheme CMS markup (amtheme-noroute-container etc.) is replaced
 * by this in the no-route CMS page body.
 */
.cms-noroute {
    padding: 3.5rem 1.5rem;
}

@media (min-width: 1024px) {
    .cms-noroute {
        padding: 6rem 1.5rem;
    }
}

.cms-noroute__inner {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    margin: 0 auto;
    max-width: 72rem;
    width: 100%;
}

@media (min-width: 1024px) {
    .cms-noroute__inner {
        gap: 3.5rem;
        grid-template-columns: repeat(2, 1fr);
    }
}

.cms-noroute__art {
    display: flex;
    justify-content: center;
    order: 2;
}

@media (min-width: 1024px) {
    .cms-noroute__art {
        justify-content: flex-end;
        order: 1;
    }
}

/* currentColor drives the SVG fill; the muted ink keeps it from competing with
   the heading. */
.cms-noroute__art svg {
    color: var(--color-gray-400);
    height: auto;
    width: 12rem;
}

@media (min-width: 1024px) {
    .cms-noroute__art svg {
        max-width: 20rem;
        width: 100%;
    }
}

.cms-noroute__body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center;
    order: 1;
}

@media (min-width: 1024px) {
    .cms-noroute__body {
        order: 2;
    }
}

/* The page's own h1/h2 already carry the theme scale from the typography
   system; these only add what the 404 layout needs beyond that. */
.cms-noroute__lead {
    font-weight: 700;
}

.cms-noroute__contact {
    color: var(--color-secondary);
    font-weight: 700;
    text-decoration: none;
    transition: color var(--transition-base);
    width: fit-content;
}

.cms-noroute__contact:hover {
    color: var(--color-secondary-darker);
}

/* --- CMS pages -------------------------------------------------------------
 *
 * Magento renders CMS page content through Magento_Cms::content.phtml, which
 * Hyvä does not override — it emits getPageContent() into the column with no
 * wrapper class at all. So the .prose rules in content.css, which style the
 * product and category copy, never reach it, and Angrefrist, Levering,
 * Salgsbetingelser and Retur render at browser defaults.
 *
 * Rather than fork the core template to add one class, the body class does it.
 * .cms-page-view is on every CMS page and nothing else.
 *
 * These pages stay as CMS pages rather than becoming phtml deliberately: they
 * are legal and policy copy that changes for commercial reasons, and moving
 * them into the theme would make every wording tweak a deploy.
 */

.cms-page-view .column.main {
    /* A measure, not the full column. These are long paragraphs of policy text
       and at full width the eye loses the line; the mockups set it around 600px
       and this is that in ch, which holds across font sizes. */
    max-width: 68ch;
}

.cms-page-view .column.main h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* The pages use bold run-in headings between sections — "Når kommer varene
   mine frem?" — which authors write as h2 or h3 depending on the page. Both get
   the same treatment, since the distinction is not meaningful in this copy. */
.cms-page-view .column.main h2,
.cms-page-view .column.main h3,
.cms-page-view .column.main h4 {
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    margin-top: 2rem;
}

.cms-page-view .column.main p {
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.cms-page-view .column.main ul {
    list-style: disc outside;
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.cms-page-view .column.main ol {
    list-style: decimal outside;
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.cms-page-view .column.main li {
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

.cms-page-view .column.main strong,
.cms-page-view .column.main b {
    font-weight: 700;
}

.cms-page-view .column.main a {
    color: var(--color-secondary);
    text-decoration: underline;
}

.cms-page-view .column.main a:hover {
    color: var(--color-secondary-darker);
}