/*
 * HS Content Page template: pages that only hold content (legal, about, policies).
 * One centered column, at most 70 characters wide. The page title and breadcrumb come from the
 * parent theme in a container above the content, so they are aligned to the same column.
 *
 * --hs-measure is registered as a length so "70ch" is resolved once, at the body font size,
 * and every element (including the smaller breadcrumb text) gets the same pixel width.
 */

@property --hs-measure {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

.hs-content-template {
    --hs-measure: 70ch;
}

.hs-content-template .woocommerce-breadcrumb,
.hs-content-template .entry-header,
.hs-content-page.content-area {
    max-width: 70ch;
    max-width: var(--hs-measure, 70ch);
    margin-inline: auto;
}

.hs-content-page.content-area {
    float: none;
    width: 100%;
    padding-block: 1em 3em;
}

.hs-content-template .entry-header .entry-title,
.hs-content-template .entry-header h1 {
    text-align: start;
}

.hs-content-page .site-main {
    width: 100%;
}

.hs-content-page .entry-content {
    line-height: 1.75;
    overflow-wrap: break-word;
}

.hs-content-page .entry-content > * + * {
    margin-block-start: 1.1em;
}

.hs-content-page .entry-content h2,
.hs-content-page .entry-content h3,
.hs-content-page .entry-content h4 {
    margin-block: 1.8em 0.5em;
    line-height: 1.3;
}

.hs-content-page .entry-content ul,
.hs-content-page .entry-content ol {
    padding-inline-start: 1.4em;
}

.hs-content-page .entry-content li + li {
    margin-block-start: 0.4em;
}

.hs-content-page .entry-content img,
.hs-content-page .entry-content iframe,
.hs-content-page .entry-content video {
    max-width: 100%;
    height: auto;
}

.hs-content-page .entry-content table {
    width: 100%;
    font-size: 0.95em;
}

.hs-content-page .entry-content th,
.hs-content-page .entry-content td {
    padding: 0.6em 0.75em;
    vertical-align: top;
    text-align: start;
    border-block-end: 1px solid rgba(0, 0, 0, 0.12);
}

/* Square images written into the content: small icons stay icon-sized, large logos are capped (About us) */
.hs-content-page .entry-content figure img[width="375"][height="375"] {
    width: 72px;
    height: 72px;
}

.hs-content-page .entry-content img[width="1200"][height="1200"] {
    display: block;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
}

.hs-content-page .entry-content figure + h3 {
    margin-block-start: 0.5em;
}

.hs-content-page .entry-content figure + h3 + p {
    margin-block-start: 0.2em;
}

@media (max-width: 600px) {
    .hs-content-page .entry-content table {
        display: block;
        overflow-x: auto;
    }
}