/* ============================================================
   Article (theory-test-guides) content styling
   Scoped to .gs-article — the database-driven article body.
   Brings the class-less DB HTML in line with the new GS pages:
   blue h2 / dark h3, no horizontal margin on headings, clear
   separation between sections, and CTA-style call-to-action links.
   ============================================================ */

/* The DB content nests <main><article><section> inside the page's
   .gs-article wrapper. Strip default margins so spacing is ours. */
.gs-article main,
.gs-article > article {
    margin: 0;
    padding: 0;
}

/* ---- Headings -------------------------------------------------
   headings.css applies margin-left/right:20px to all h1/h2, which
   pushes article headings out of line with the body text. Zero the
   horizontal margin on every heading in the article. */
.gs-article h1,
.gs-article h2,
.gs-article h3,
.gs-article h4,
.gs-article h5,
.gs-article h6 {
    margin-left: 0;
    margin-right: 0;
}

.gs-article h2 {
    color: #0093c9; /* gs-color-theme-blue, matches new-page section headings */
    font-size: 18pt;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 1rem;
}

.gs-article h3 {
    color: #212529; /* dark, matches new-page sub-headings */
    font-size: 16pt;
    font-weight: bold;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

/* ---- Section separation --------------------------------------
   Give each section after the first a clear visual break. */
.gs-article section + section {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid #e9ecef;
}

/* Offset in-page anchor jumps clear of the sticky header. */
.gs-article section[id] {
    scroll-margin-top: 90px;
}

/* ---- Body copy ----------------------------------------------- */
.gs-article p {
    margin-bottom: 1rem;
}

.gs-article ul,
.gs-article ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.gs-article li {
    margin-bottom: 0.4rem;
}

/* ---- Inline links -------------------------------------------- */
.gs-article a {
    color: #0093c9;
    font-weight: 600;
    text-decoration: underline;
}

.gs-article a:hover {
    color: #077ca7;
}

/* ---- Call-to-action links -----------------------------------
   .gs-cta is added (server-side) to paragraphs whose only content
   is a single link. Render these as buttons like the new pages.
   Secondary CTAs use the blue button; booking / conversion CTAs
   (choose-test-centre) use the orange primary button. */
.gs-article p.gs-cta {
    margin-bottom: 0.75rem;
}

.gs-article p.gs-cta a {
    display: inline-block;
    font-size: 14pt;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    color: #fff !important;
    background-color: #0093c9; /* gs-button-blue */
    border: 1px solid #0093c9;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.gs-article p.gs-cta a:hover {
    color: #fff !important;
    background-color: #006c94;
    border-color: #006c94;
}

.gs-article p.gs-cta a:active {
    background-color: #004761;
    border-color: #004761;
}

/* Primary booking / conversion actions in orange. */
.gs-article p.gs-cta a[href*="choose-test-centre"],
.gs-article p.gs-cta a[href$="booktheorytests.co.uk"],
.gs-article p.gs-cta a[href$="booktheorytests.co.uk/"] {
    background-color: #f99c2d; /* gs-button-orange */
    border-color: #f99c2d;
}

.gs-article p.gs-cta a[href*="choose-test-centre"]:hover,
.gs-article p.gs-cta a[href$="booktheorytests.co.uk"]:hover,
.gs-article p.gs-cta a[href$="booktheorytests.co.uk/"]:hover {
    background-color: #ed8607;
    border-color: #ed8607;
}

.gs-article p.gs-cta a[href*="choose-test-centre"]:active,
.gs-article p.gs-cta a[href$="booktheorytests.co.uk"]:active,
.gs-article p.gs-cta a[href$="booktheorytests.co.uk/"]:active {
    background-color: #bc6a06;
    border-color: #bc6a06;
}