/* A2-1077: the Advertiser's Guide (resources/views/guide/page.blade.php).
   A2-1088: the business section's bar, a band in the /business hero colours, the business type
   scale, the list of the guide's pages and a closing band. The type rules repeat business.css's
   rather than loading it: business.css styles a whole .biz page. */
.guide {
    --g-indigo: #180054;
    --g-violet: #2E0F7B;
    --g-pink: #FB698E;
    --g-lilac: #E8E1F9;
    --g-mist: #F7F5FC;
    --g-text: #1c1633;
    --g-muted: #5b5670;
    background: #fff;
    color: var(--g-text);
    /* Clears the site's fixed header, as /business does. */
    padding: 80px 0 0;
}
.guide *, .guide *::before, .guide *::after { box-sizing: border-box; }
.guide .guide-wide { max-width: 1140px; }

/* Type: the business scale. */
.guide h1 { font-family: Raleway-ExtraBold, Raleway-Bold, Arial, sans-serif; font-size: 30px; line-height: 1.15; color: #fff; margin: 0; }
.guide h2 { font-family: Raleway-Bold, Arial, sans-serif; font-size: 24px; line-height: 1.25; color: var(--g-indigo); margin: 2.2rem 0 .6rem; scroll-margin-top: 90px; }
.guide h3 { font-family: OpenSans-Bold, Arial, sans-serif; font-size: 17px; line-height: 1.35; color: var(--g-indigo); margin: 1.6rem 0 .4rem; scroll-margin-top: 90px; }
.guide h4 { font-family: OpenSans-Bold, Arial, sans-serif; font-size: 16px; margin: 1.2rem 0 .3rem; }
.guide p, .guide li, .guide td, .guide th { font-size: 1rem; line-height: 1.6; }
.guide strong { font-family: OpenSans-Bold, Arial, sans-serif; font-weight: normal; }
.guide a { color: #3a1f8c; text-decoration: underline; text-underline-offset: 2px; }
.guide a:hover { color: #C92654; }
.guide a:focus-visible, .guide summary:focus-visible { outline: 3px solid var(--g-indigo); outline-offset: 2px; }
.guide code { background: #f1eef9; border-radius: 4px; padding: 1px 5px; font-size: .92em; word-break: break-word; }

/* The business bar under the header. */
.guide-bar { background: #fff; border-bottom: 1px solid var(--g-lilac); }
.guide-bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding-top: 14px; padding-bottom: 14px; }
.guide-bar p { margin: 0; font-size: 15px; }
.guide-bar-title { font-family: Raleway-Bold, Arial, sans-serif; letter-spacing: .3px; color: var(--g-indigo); }
.guide-bar-links { color: #3b3450; overflow-wrap: anywhere; }

/* The band: the /business hero colours. */
.guide-band { background: linear-gradient(135deg, #18014D 0%, var(--g-violet) 100%); color: #fff; padding: 22px 0 28px; }
.guide-band a { color: #fff; }
.guide-band a:hover { color: var(--g-pink); }
.guide-band a:focus-visible { outline-color: var(--g-pink); }
.guide-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 12px; font-size: .9rem; color: #e9e4f7; }
.guide-breadcrumb li + li::before { content: "›"; margin-inline-end: 6px; color: #d9d1f0; }
[dir="rtl"] .guide-breadcrumb li + li::before { content: "‹"; }
.guide-lead { margin: 10px 0 0; max-width: 760px; font-size: 17px; line-height: 1.55; color: #e9e4f7; }

/* Layout: the page list beside the article from 992 px. */
.guide-layout { display: block; padding-top: 28px; padding-bottom: 48px; }
.guide-article { min-width: 0; max-width: 800px; }
.guide-pages ol { list-style: none; margin: 0; padding: 0; }
.guide-pages li { margin: 0; }
.guide-pages a { display: block; padding: 6px 10px; border-radius: 8px; font-size: 15px; line-height: 1.4; color: #3a1f8c; text-decoration: none; }
.guide-pages a:hover { background: var(--g-mist); text-decoration: underline; }
.guide-pages a[aria-current="page"] { font-family: OpenSans-Bold, Arial, sans-serif; color: var(--g-indigo); background: var(--g-lilac); }
.guide-pages--rail { display: none; }
.guide-pages--fold { border: 1px solid var(--g-lilac); border-radius: 12px; margin: 0 0 1.4rem; background: #fff; }
.guide-pages--fold summary { cursor: pointer; padding: 12px 16px; font-family: OpenSans-Bold, Arial, sans-serif; font-size: 15px; color: var(--g-indigo); }
.guide-pages--fold nav { padding: 0 8px 10px; }
@media (min-width: 992px) {
    .guide h1 { font-size: 40px; line-height: 1.12; }
    .guide-band { padding: 28px 0 34px; }
    .guide-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 40px; align-items: start; }
    .guide-pages--rail { display: block; position: sticky; top: 92px; border-inline-end: 1px solid var(--g-lilac); padding-inline-end: 12px; }
    .guide-pages--rail .is-hub a { font-family: Raleway-Bold, Arial, sans-serif; color: var(--g-indigo); margin-bottom: 4px; }
    .guide-pages--fold { display: none; }
}

/* Article parts. */
.guide-summary { background: #f6f4fa; border-inline-start: 4px solid var(--g-pink); border-radius: 10px; padding: 14px 18px; }
.guide-contents { background: #f6f4fa; border-radius: 12px; padding: 14px 20px; margin: 0 0 1.4rem; }
.guide .guide-contents-title { font-family: OpenSans-Bold, Arial, sans-serif; font-size: 1rem; margin: 0 0 .4rem; }
.guide-contents ol { margin: 0; padding-inline-start: 1.2rem; }
.guide-table { overflow-x: auto; margin: .8rem 0 1.2rem; }
.guide-table:focus-visible { outline: 3px solid var(--g-indigo); outline-offset: 2px; }
.guide-table table { border-collapse: collapse; width: 100%; min-width: 420px; }
.guide-table th, .guide-table td { border: 1px solid #e4e0ee; padding: 8px 10px; text-align: start; vertical-align: top; }
.guide-table thead th { background: var(--g-indigo); color: #fff; }
.guide-table tbody th { font-family: OpenSans-SemiBold, Arial, sans-serif; font-weight: normal; background: #faf9fd; }
.guide-shot { margin: .6rem 0 1rem; }
.guide-shot img { display: block; max-width: 100%; height: auto; border: 1px solid #e4e0ee; border-radius: 12px; }
.guide-pager { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; border-top: 1px solid #e4e0ee; margin-top: 2.4rem; padding-top: 1rem; }
.guide-pager a { font-family: OpenSans-SemiBold, Arial, sans-serif; }

/* The closing band. */
.guide-cta { background: var(--g-mist); border-top: 1px solid var(--g-lilac); }
.guide-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding-top: 36px; padding-bottom: 40px; }
.guide .guide-cta-title { margin: 0 0 6px; }
.guide-cta-text { margin: 0; max-width: 560px; color: #3b3450; }
.guide-cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.guide .guide-cta-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 12px 28px; border-radius: 25px;
    background: var(--g-pink); color: var(--g-indigo); font-family: OpenSans-Bold, Arial, sans-serif; font-size: 16px; text-decoration: none; }
.guide .guide-cta-btn:hover { background: #ff8aa7; color: var(--g-indigo); }
.guide-cta-signin { margin: 0; font-size: 15px; }

@media (max-width: 575px) {
    .guide .guide-wide { padding-inline: 16px; }
    .guide-bar-signin { display: none; }
    .guide h2 { font-size: 22px; }
}