/**
 * Claue V2 — CMS content page styles (P18 + P19)
 *
 * Targets generic CMS pages that render the stock Magento body content
 * (Privacy & Cookie Policy, Enable Cookies, and any future text-only CMS
 * page). These pages already inherit the themed header, footer, breadcrumbs
 * and page title; the remaining off-theme elements are styled here.
 *
 * P18 — Privacy & Cookie Policy: the Luma amber ".message.info" callout that
 * ships as the page's editable placeholder.
 *
 * P19 — Enable Cookies (".enable-cookies" CMS content): the page lists a set
 * of per-browser cookie-help links. The global porto.css `ul { list-style:
 * none }` nav reset strips the list affordance, and the anchors fall through
 * to plain grey body text — so the actionable external links render as inert
 * text with no link/hover treatment. Restyled into an intentional, on-brand
 * list of tappable rows.
 *
 * Scope: every rule is anchored to ".cl-page-cms .cms-content" (P18 callout)
 * or the tighter ".cl-page-cms .cms-content.enable-cookies" (P19 link list),
 * so only in-content CMS markup is affected. Session/flash messages live in
 * ".page.messages" (never inside ".cms-content"), so they are untouched. The
 * About page is also ".cl-page-cms" but renders its own ".cl-about-page"
 * markup with neither ".message.info" nor ".enable-cookies", so there is no
 * overlap.
 *
 * Goal: replace the bright amber Luma info box and the inert browser-link list
 * with on-brand monochrome treatments (light-grey field, black leading-edge
 * accent, lucide glyphs) matching the Claue black/white/grey palette.
 */

/* ── In-content info callout ──
   Reset the Luma amber ".message.info" box (markup:
   <div class="message info"><span>…</span></div>) into a monochrome callout. */
.cl-page-cms .cms-content .message.info {
    display: flex;
    align-items: flex-start;
    gap: var(--cl-space-sm);
    margin: 0 0 var(--cl-space-xl);
    padding: var(--cl-space-md) var(--cl-space-lg);
    background: var(--cl-bg-light);
    border: 1px solid var(--cl-border);
    border-inline-start: 3px solid var(--cl-primary);
    border-radius: var(--cl-radius-md);
    box-shadow: none;
    color: var(--cl-text-dark);
    font-family: var(--cl-font);
    font-size: var(--cl-font-size);
    line-height: var(--cl-line-height);
}

/* Suppress the default Luma warning-triangle glyph (rendered on the first
   child's ::before). The ::after reset is a harmless belt-and-suspenders. */
.cl-page-cms .cms-content .message.info > *:first-child::before,
.cl-page-cms .cms-content .message.info::after {
    content: none;
    display: none;
}

/* Monochrome lucide "info" glyph rendered as a flex item before the text. */
.cl-page-cms .cms-content .message.info::before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%2016v-4'/%3E%3Cpath%20d='M12%208h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cl-page-cms .cms-content .message.info > div,
.cl-page-cms .cms-content .message.info > span {
    color: var(--cl-text-dark);
    font-size: var(--cl-font-size);
    line-height: var(--cl-line-height);
}

/* ── Enable Cookies — per-browser help links ──
   Markup (Magento sample content):
     <div class="enable-cookies cms-content">
       <p>…</p>
       <ul>
         <li><a href="https://support.google.com/…" target="_blank">Google Chrome</a></li>
         …
       </ul>
     </div>
   Turn the inert grey link list into an intentional bordered list of rows,
   each row a clearly-tappable external link with a leading monochrome glyph. */
.cl-page-cms .cms-content.enable-cookies ul {
    list-style: none;
    margin: 0 0 var(--cl-space-xl);
    padding: 0;
    max-width: 460px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    overflow: hidden;
}

.cl-page-cms .cms-content.enable-cookies ul > li {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--cl-border);
}

.cl-page-cms .cms-content.enable-cookies ul > li:first-child {
    border-top: 0;
}

.cl-page-cms .cms-content.enable-cookies ul > li > a {
    display: flex;
    align-items: center;
    gap: var(--cl-space-sm);
    padding: var(--cl-space-md) var(--cl-space-lg);
    color: var(--cl-text-dark);
    font-family: var(--cl-font);
    font-size: var(--cl-font-size);
    font-weight: 500;
    line-height: var(--cl-line-height);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Leading monochrome lucide "external-link" glyph (direction-neutral → RTL-safe). */
.cl-page-cms .cms-content.enable-cookies ul > li > a::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15%203h6v6'/%3E%3Cpath%20d='M10%2014%2021%203'/%3E%3Cpath%20d='M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cl-page-cms .cms-content.enable-cookies ul > li > a:hover,
.cl-page-cms .cms-content.enable-cookies ul > li > a:focus-visible {
    background-color: var(--cl-bg-light);
    color: var(--cl-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .cl-page-cms .cms-content .message.info {
        padding: var(--cl-space-sm) var(--cl-space-md);
    }

    .cl-page-cms .cms-content.enable-cookies ul {
        max-width: none;
    }

    .cl-page-cms .cms-content.enable-cookies ul > li > a {
        /* 12px vertical → ~46px row height, clears the 44px tap-target guideline */
        padding: 12px var(--cl-space-md);
    }
}