/* ===================================================================
   Content Page (Editor) template - assets/css/content-page.css

   Loaded ONLY on pages that use page-templates/content-page.php
   (see wtl_content_page_styles() in functions.php), so the overrides
   of theme-global selectors below do not affect any other page.

   All copy on these pages comes from the WordPress editor, so the
   rules target plain editor output (h2, h3, p, ul, ol, table...) plus
   a few optional helper classes you can add in the editor Text tab:
       .page-updated  - the small "Last updated: ..." line
       .page-intro    - the lead block above the first section
       .page-note     - a boxed callout
       .page-address  - a contact / address block
=================================================================== */

/* The theme gives the fixed mobile header an opaque background only for
   body:not(.v-dark) (style.css ~1743). The site ships in dark mode, so the
   header stays transparent and the page text scrolls through it.
   Mirror the same treatment for the dark theme. */
@media only screen and (max-width: 991px) {
    body.v-dark .site-header.dsn-container {
        padding-top: 15px;
        padding-bottom: 15px;
        background-color: var(--bg-color);
        border-bottom: 1px solid var(--border-color);
    }
}

.section_content {
    padding-top: 50px;
    padding-bottom: 100px;
}

/* .header_padding hardcodes 50px side padding at every breakpoint with !important,
   while .dsn-container steps down to 40/25/15px - realign the title with the body copy */
@media only screen and (max-width: 991px) {
    .content-page-header.header_padding {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

@media only screen and (max-width: 767px) {
    .content-page-header.header_padding {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
}

@media only screen and (max-width: 575px) {
    .content-page-header.header_padding {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Reading column: left-aligned with the page title, capped for a comfortable measure */
.section_content .content-wrap {
    max-width: 1300px;
}

/* wpautop leaves stray empty paragraphs between editor blocks */
.section_content .content-wrap p:empty {
    display: none;
}

/* ---------- optional editor helper blocks ---------- */

.section_content .page-updated {
    display: block;
    font-family: var(--heading-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--heading-text-color);
    margin-bottom: 24px;
}

.section_content .page-intro {
    padding-bottom: 40px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
}

.section_content .page-intro p:first-of-type {
    font-size: 17px;
}

.section_content .page-note {
    padding: 24px 28px;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--heading-text-color);
    border-radius: 6px;
    margin-top: 24px;
    margin-bottom: 24px;
}

.section_content .page-note > *:last-child {
    margin-bottom: 0;
}

.section_content .page-address,
.section_content address {
    font-style: normal;
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
    color: var(--font-color);
}

/* ---------- editor typography ---------- */

.section_content h2 {
    font-family: var(--heading-font);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--heading-color);
    margin: 50px 0 5px;
}

.section_content h3 {
    font-family: var(--heading-font);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--heading-color);
    margin: 32px 0 14px;
}

/* an h3 straight after its section h2 keeps the tighter original spacing */
.section_content h2 + h3 {
    margin-top: 18px;
}

.section_content h4 {
    font-family: var(--heading-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--heading-color);
    margin: 24px 0 10px;
}

.section_content p,
.section_content li {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--font-color);
}

.section_content p {
    margin: 0 0 0px;
}

.section_content p:last-child {
    margin-bottom: 0;
}

.section_content strong,
.section_content b {
    font-weight: 600;
    color: var(--heading-color);
}

/* Theme resets list-style globally, so bullets are drawn manually */
.section_content ul {
    list-style: none;
    padding-left: 0;
    margin: 0 0 18px;
}

.section_content li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 2px;
}

.section_content li:last-child {
    margin-bottom: 0;
}

.section_content ul > li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--heading-text-color);
}

.section_content ol {
    list-style: none;
    counter-reset: wtl-ol;
    padding-left: 0;
    margin: 0 0 18px;
}

.section_content ol > li {
    counter-increment: wtl-ol;
    padding-left: 28px;
}

.section_content ol > li::before {
    content: counter(wtl-ol) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--heading-text-color);
}

/* nested lists */
.section_content li > ul,
.section_content li > ol {
    margin: 4px 0 8px;
    padding-left: 4px;
}

.section_content a {
    color: var(--heading-text-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    word-break: break-word;
}

.section_content a:hover {
    opacity: .75;
}

.section_content blockquote {
    margin: 24px 0;
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--heading-text-color);
}

.section_content blockquote p {
    font-size: 17px;
    font-style: italic;
}

.section_content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Editor tables must scroll inside the reading column, never widen the page */
.section_content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px;
    display: block;
    overflow-x: auto;
}

.section_content th,
.section_content td {
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    font-size: 15px;
    line-height: 1.7;
    color: var(--font-color);
    text-align: left;
    vertical-align: top;
}

.section_content th {
    font-family: var(--heading-font);
    font-weight: 600;
    color: var(--heading-color);
}

.section_content hr {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 40px 0;
}

@media only screen and (max-width: 991px) {
    /* padding-right keeps the copy clear of the fixed vertical
       PORTFOLIO/BLOG/ABOUT strip, which has an opaque background */
    .section_content {
        padding-top: 40px;
        padding-bottom: 70px;
        padding-right: 60px;
    }

    .section_content h2 {
        font-size: 21px;
        margin-top: 40px;
    }

    .section_content h3 {
        font-size: 16px;
    }

    .section_content .page-intro p:first-of-type {
        font-size: 16px;
    }
}

@media only screen and (max-width: 575px) {
    /* the vertical strip moves flush to right:0 at this breakpoint */
    .section_content {
        padding-top: 30px;
        padding-right: 48px;
    }

    .section_content p,
    .section_content li,
    .section_content .page-address,
    .section_content address {
        font-size: 15px;
    }

    .section_content li {
        padding-left: 18px;
    }

    .section_content ul > li::before {
        left: 0;
        top: 10px;
    }

    .section_content .page-note {
        padding: 18px 16px;
    }

    /* Long address / GSTIN lines must not force the page to scroll sideways */
    .section_content .page-address,
    .section_content address {
        line-height: 1.9;
        overflow-wrap: break-word;
    }
}