/* CartCraft: the blog and the remaining pages on narrow screens.
 *
 * Loaded by inc/ccx-mobblog.php on /blog/, on every archive, on every single
 * post, on the search results, on the 404 page, on the three legal pages and
 * on /thank-you/.
 *
 * ABOUT THE SELECTORS
 * Elementor writes one rule per element, and those rules look like
 *
 *     .elementor-4368 .elementor-element.elementor-element-d52a6ae { ... }
 *
 * which counts as four classes. A rule here has to be more specific than
 * that or it will not land. Two ways are used below, both without
 * !important:
 *
 *   a  one more class from the same element, for example .e-loop-item next
 *      to .elementor-4368
 *   b  a leading  body  selector, which adds a tag to the count and beats a
 *      rule of the same class count
 *
 * The breakpoints are Elementor's own: phone up to 767, tablet 768 to 1024,
 * desktop from 1025.
 */

/* ============================================================
 * 1  BLOG CARD, loop template 4368
 *    Used by /blog/, by every category archive and by the related
 *    posts carousel under an article.
 * ============================================================ */

/* 1a  The title and the excerpt carry a fixed width from the builder:
 *     389px from 1025 upwards, 328px below. A grid column can therefore
 *     never become narrower than 389px, and three columns plus two 24px
 *     gaps always come to 1215px. Between 1025 and 1215 the page was that
 *     much wider than the window (measured at 1025: document 1215px).
 *     On a tablet the opposite happened: a card is 432px wide at 1024 while
 *     its title was capped at 328, leaving 104px of the card unused.
 *     Both go away when the two widgets simply follow the card. */
.elementor-4368.e-loop-item .elementor-element.elementor-element-d52a6ae,
.elementor-4368.e-loop-item .elementor-element.elementor-element-056bd4a {
    --container-widget-width: 100%;
    width: 100%;
    max-width: 100%;
}

/* 1b  A grid item is allowed to become narrower than its content. Without
 *     this the browser keeps a track at the widest word of a headline.
 *     .elementor-grid-item carries the same rule in Elementor's own file,
 *     but a loop item does not have that class. */
.elementor-loop-container > .e-loop-item {
    min-width: 0;
}

/* 1c  Below 1025 the builder pushes the title, the excerpt and the line
 *     with author and date five pixels to the right while the picture stays
 *     flush with the card. The line with author and date is a full width
 *     row, so those five pixels made it stick out over the right card edge
 *     (measured at 375: card ends at 353, the row ended at 358).
 *     All three now start where the picture starts. */
@media (max-width: 1024px) {
    .elementor-4368.e-loop-item .elementor-element.elementor-element-d52a6ae > .elementor-widget-container,
    .elementor-4368.e-loop-item .elementor-element.elementor-element-056bd4a > .elementor-widget-container {
        margin-left: 0;
    }

    .elementor-4368.e-loop-item .elementor-element.elementor-element-04541a8 {
        --margin-left: 0px;
    }
}

/* ============================================================
 * 2  BLOG ARCHIVE, template 4363, and the category archive 4457
 * ============================================================ */

@media (max-width: 767px) {
    /* 2a  Three left edges on one screen: the eyebrow started at 16, the
     *     headline at 24, the card grid at 23. The headline and the grid
     *     both carry a fixed width from the builder (328 and 330), which on
     *     a 375 phone leaves the column and centres what is left. Both now
     *     use the column, so everything lines up under the eyebrow and the
     *     cards gain 13px. */
    body .elementor-4363 .elementor-element.elementor-element-ce5ecfe,
    body .elementor-4363 .elementor-element.elementor-element-dc6dda9 {
        --container-widget-width: 100%;
        width: 100%;
        max-width: 100%;
    }

    /* 2b  The three filters above the grid stood 289px wide in a 343px
     *     column, indented by 27px on both sides for no visible reason.
     *     A control on a phone takes the full width. */
    body .elementor-4363 .elementor-element.elementor-element-7bf00ba > .elementor-element {
        --container-widget-width: 100%;
        width: 100%;
        max-width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* 2c  The headline of the archive was held at 328px on a tablet as well,
     *     so "Latest News and Stories" wrapped into two lines in the middle
     *     of a 736px wide column. */
    body .elementor-4363 .elementor-element.elementor-element-ce5ecfe {
        --container-widget-width: 100%;
        width: 100%;
        max-width: 100%;
    }
}

/* 2d  Pagination. The page numbers were 26 by 18 pixels, far below the 44
 *     a finger needs, while the two arrows next to them already were 44 and
 *     hung 20px below the row through a negative margin. Every element of
 *     the row is now the same size and sits on the same line. */
.elementor-4363 .elementor-pagination .page-numbers,
.elementor-4457 .elementor-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-bottom: 0;
    vertical-align: middle;
}

/* ============================================================
 * 2e  SIDE MARGIN BETWEEN 1025 AND 1263 PIXELS
 *
 * Up to 1024 a section keeps 16 pixels of air on the left and the
 * right. From 1025 that padding is zero, and the box inside only
 * starts holding the content away from the window once it reaches
 * its own limit of 1216 pixels, which happens at about 1264. In
 * between, and that band covers common laptop widths such as 1152
 * and 1200, the content sits directly against both window edges.
 * Measured at 1100: the cards on /blog/ start at 0, a search result
 * runs from 0 to 1100, the paragraphs of the privacy policy end at
 * exactly 1100. For comparison /references/ keeps 20 pixels there.
 *
 * The band gets the air back. From 1264 upwards the box is narrower
 * than the window anyway, so the padding changes nothing there.
 * ============================================================ */

@media (min-width: 1025px) and (max-width: 1263px) {
    body .elementor-4363 .elementor-element.elementor-element-15ff7fc,
    body .elementor-4457 .elementor-element.elementor-element-1e9fe55,
    body .elementor-4480 .elementor-element.elementor-element-7d0e430,
    body .elementor-6362 .elementor-element.elementor-element-7d5117e,
    body .elementor-4242 .elementor-element.elementor-element-adf2300,
    body .elementor-7788 .elementor-element.elementor-element-adf2300,
    body .elementor-10725 .elementor-element.elementor-element-adf2300 {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ============================================================
 * 3  SINGLE POST, template 4480
 * ============================================================ */

@media (max-width: 767px) {
    /* 3a  The picture at the top of an article is held at 340px height at
     *     every width. On a 375 phone that turns a 3:2 photograph into an
     *     almost square 343 by 340 box: a third of the picture is cut away
     *     and 340 pixels of a 812 pixel screen are gone before the text
     *     starts. The picture now keeps its own proportion, which is 3:2 in
     *     every article measured, and comes out 111 pixels shorter.
     *     Tablet and desktop keep the letterbox crop they were given. */
    body .elementor-4480 .elementor-element.elementor-element-99b4473 img {
        height: auto;
        aspect-ratio: 3 / 2;
    }
}

/* 3b  Headings inside the article. Measured in five articles, the same
 *     everywhere: h2 is 30px on a phone and 28px on a tablet, h3 is 28px
 *     with a line height of 28px on both. Two things follow from that. A
 *     wrapping h3 writes its lines into one another, and on a tablet h3 and
 *     h2 are the same size, so the article loses its second level.
 *     h3 therefore steps down and gets room to breathe. h2 is left alone. */
@media (max-width: 767px) {
    body .elementor-location-single .elementor-widget-theme-post-content .elementor-widget-heading h3.elementor-heading-title {
        font-size: 22px;
        line-height: 1.3;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    body .elementor-location-single .elementor-widget-theme-post-content .elementor-widget-heading h3.elementor-heading-title {
        font-size: 23px;
        line-height: 1.32;
    }
}

/* 3c  Line length on a tablet. On a desktop an article shares its row with
 *     the 286px table of contents column, so the text column comes out at
 *     803px. Below 1025 that column is hidden and the article takes the
 *     whole row: 736px at 768, and 992px at 1024, which is 124 characters
 *     a line. The article column is therefore given the same width it has
 *     on a desktop. At 768 nothing changes, the row is narrower than that
 *     anyway; at 1024 the line drops from 124 to 98 characters, the same
 *     as on a desktop.
 *
 *     The whole column is capped and not the paragraphs inside it. A cap on
 *     the paragraphs alone was tried first and looked broken: the article
 *     mixes several widget shapes, some paragraphs sat inside a plain text
 *     editor and were caught, others were not, and the text ran ragged
 *     between 620 and 992 pixels down the same page.
 *
 *     That the site reads 98 characters a line at all is a separate
 *     question and a decision for the owner, not something to change from
 *     inside a fix for narrow screens. */
@media (min-width: 768px) and (max-width: 1024px) {
    body .elementor-4480 .elementor-element.elementor-element-2b02d60 {
        max-width: 803px;
    }
}

/* 3d  The crumb trail above an article and the category link in the line
 *     under the title are set in 12px and are fifteen pixels tall, which is
 *     a third of what a finger reliably hits. The row they sit in is 72
 *     pixels tall on a phone, so there is room. The links keep their look
 *     and get a taller area to press, and the trail moves from 12 to 13px,
 *     which is where the rest of the small type on the site sits. */
@media (max-width: 767px) {
    body .elementor-4480 .elementor-element.elementor-element-a0dfc9a a,
    body .elementor-4480 .elementor-element.elementor-element-27e4785 a,
    body .elementor-4480 .elementor-element.elementor-element-f158a30 a {
        display: inline-block;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    body .elementor-4480 .elementor-element.elementor-element-a0dfc9a .elementor-heading-title,
    body .elementor-4480 .elementor-element.elementor-element-a0dfc9a .elementor-icon-list-item {
        font-size: 13px;
    }
}

/* 3e  The arrows of the related posts carousel are 25 by 25 pixels. The
 *     icon keeps that size, the area a finger has to hit grows to 44.
 *     The button is positioned absolutely against the left and the right
 *     edge of the carousel, so it grows inwards and stays inside the
 *     content box. */
.elementor-4480 .elementor-element.elementor-element-c87fe3a .elementor-swiper-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

/* ============================================================
 * 4  THE TWO CLICK GUIDE (inc/ccx-scribe.php) inside an article
 * ============================================================ */

/* 4a  The HTML widget that holds the placeholder still carries a white
 *     background with a 7px radius from the time the guide had a white
 *     frame. The dark card on top of it is rounded by 15px, so a white arc
 *     shows in all four corners. Two ways in, on purpose: the two articles
 *     that hold a guide are named, and a rule with :has() catches any
 *     further placement. A browser without :has() keeps the named rules. */
body .elementor-7207 .elementor-element.elementor-element-a11cab1 > .elementor-widget-container,
body .elementor-7891 .elementor-element.elementor-element-8b11bf9 > .elementor-widget-container,
body .elementor .elementor-element:has(> .elementor-widget-container > .ccx-scribe) > .elementor-widget-container {
    background-color: transparent;
}

/* 4b  Not a fault, written down so nobody chases it twice: the card is
 *     293px wide inside a 343px column on a phone. Those 50 pixels are the
 *     padding of the bordered box the guide sits in (container 84da849,
 *     24px on each side plus a 1px border), and that box is on purpose. */

/* ============================================================
 * 5  SEARCH RESULTS, template 6362 with loop 6366
 * ============================================================ */

/* 5a  A result title is set in 24px with a line height of 20px. A title of
 *     three lines therefore fills 60 pixels with 70 pixels of text and the
 *     lines touch. Measured on /?s=compliance at 375: heading box 60px,
 *     text inside 70px. */
body .elementor-6366 .elementor-element.elementor-element-bc19238 .elementor-heading-title {
    line-height: 1.26;
}

/* 5b  The excerpt under a result runs the full width of the window: 92
 *     characters a line on a tablet, 152 on a wide desktop. The search page
 *     has no reading column of its own, so it borrows the one the articles
 *     and the legal pages use, which is 803 pixels. */
@media (min-width: 768px) {
    body .elementor-6366 .elementor-element.elementor-element-fc915bc > .elementor-widget-container {
        max-width: 803px;
    }
}

/* ============================================================
 * 6  404 PAGE, template 10226
 * ============================================================ */

@media (max-width: 767px) {
    /* On a phone the page shrinks to a 263 pixel block with a 20px headline
     *     and 13px of text, while from 768 upwards the same page uses 44px
     *     and 20px. 13px is below what is comfortable to read on a phone,
     *     and the block reads as a footnote rather than as the answer to a
     *     dead link. The two sizes move up, the block gets room. */
    body .elementor-10226 .elementor-element.elementor-element-1ef3cfa .elementor-heading-title {
        font-size: 28px;
        line-height: 1.24;
    }

    body .elementor-10226 .elementor-element.elementor-element-aca8f34 .elementor-heading-title {
        font-size: 15px;
        line-height: 1.5;
    }

    body .elementor-10226 .elementor-element.elementor-element-1ef3cfa,
    body .elementor-10226 .elementor-element.elementor-element-aca8f34 {
        --container-widget-width: 100%;
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================================
 * 7  LEGAL PAGES: privacy policy 4242, terms 7788, imprint 10725
 *    Wording untouched, only the size of the headings and the
 *    contents box.
 * ============================================================ */

/* 7a  A section heading is 36px with a line height of 36px, on every width.
 *     Wherever such a heading wraps, its two lines have no gap at all and
 *     the letters of the upper line sit on the letters of the lower one.
 *     Counted on the terms page: twelve headings wrap at 1025, five still
 *     wrap at 1600. This is therefore not a phone problem and the line
 *     height is put right everywhere. Only h2 is named, so the small
 *     eyebrow lines above a page title, which are heading widgets as well,
 *     keep their size. */
body .elementor-4242 .elementor-element.elementor-widget-heading h2.elementor-heading-title,
body .elementor-7788 .elementor-element.elementor-widget-heading h2.elementor-heading-title,
body .elementor-10725 .elementor-element.elementor-widget-heading h2.elementor-heading-title {
    line-height: 1.2;
}

@media (max-width: 767px) {
    /* 7b  On a 343 pixel column a heading like "Data Sharing and
     *     Third-Party Services" runs over three lines, and 36px next to
     *     18px of body text is out of scale for a phone. */
    body .elementor-4242 .elementor-element.elementor-widget-heading h2.elementor-heading-title,
    body .elementor-7788 .elementor-element.elementor-widget-heading h2.elementor-heading-title,
    body .elementor-10725 .elementor-element.elementor-widget-heading h2.elementor-heading-title {
        font-size: 26px;
        line-height: 1.26;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* 7c  The page title is held at the phone size of 28px while 736 to 992
     *     pixels are available, so a tablet reads a headline that is smaller
     *     than the section headings below it. Privacy policy and terms use
     *     the same element for it. */
    body .elementor-4242 .elementor-element.elementor-element-ffdff11 .elementor-heading-title,
    body .elementor-7788 .elementor-element.elementor-element-ffdff11 .elementor-heading-title {
        font-size: 40px;
        line-height: 1.2;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* 7d  Same case as an article, same answer. On a desktop the text of a
     *     legal page shares its row with the contents column and comes out
     *     at 803px. Below 1025 that column becomes a bar above the text and
     *     the text takes the whole row: 992px at 1024, which is 121
     *     characters a line on a page where a reader has to follow every
     *     line. The text keeps the width it has on a desktop. At 768 the
     *     row is narrower than that and nothing changes. */
    body .elementor-4242 .elementor-element.elementor-widget-text-editor > .elementor-widget-container,
    body .elementor-7788 .elementor-element.elementor-widget-text-editor > .elementor-widget-container {
        max-width: 803px;
    }
}

/* 7e  The table of contents. On a phone the whole widget is a bare 24 pixel
 *     line: a 14px heading, a 24 by 24 arrow, no frame, no surface. It does
 *     not read as something to press, and 24 pixels is too small to press.
 *     From 1025 upwards the widget is a column beside the text and stays as
 *     it is. */
@media (max-width: 1024px) {
    .elementor-widget-table-of-contents .elementor-toc__header {
        min-height: 48px;
        align-items: center;
        padding: 0 14px;
        border: 1px solid rgb(44, 51, 76);
        border-radius: 12px;
        background: rgba(216, 226, 255, 0.04);
    }

    .elementor-widget-table-of-contents .elementor-toc__header-title {
        font-size: 15px;
    }

    .elementor-widget-table-of-contents .elementor-toc__toggle-button {
        width: 32px;
        height: 32px;
        justify-content: center;
    }

    .elementor-widget-table-of-contents .elementor-toc__body {
        padding-top: 10px;
    }

    .elementor-widget-table-of-contents .elementor-toc__list-item-text {
        display: inline-block;
        padding: 5px 0;
    }
}

/* ============================================================
 * 8  THANK YOU PAGE 8723
 * ============================================================ */

@media (max-width: 767px) {
    /* The one sentence this page exists for is set in 18px, one size below
     * the body text of every other page. */
    body .elementor-8723 .elementor-element.elementor-element-51bb165 .elementor-heading-title {
        font-size: 21px;
        line-height: 1.35;
    }
}

/* ============================================================
 * 9  TABLES INSIDE AN ARTICLE OR A LEGAL PAGE
 *    None of the eighteen articles and none of the three legal
 *    pages holds a table today, checked in the page data. The
 *    rule is here so that the first one that is written does not
 *    push the page sideways on a phone: the table keeps its own
 *    width and scrolls inside its own box.
 * ============================================================ */

@media (max-width: 1024px) {
    .elementor-widget-theme-post-content table,
    .elementor-widget-text-editor table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}