/* Fixes for the imported WordPress pages (pages/), loaded after wp-custom.css on every one
   of them. Each rule says what was broken; most were broken on www.corjl.com too.
   Rewritten pages do not load this file; their CSS is site.css. */

/* Header, 1030 to 1369px: the header container is 980px wide here and the seller menu
   (six items, the last floated right) needs about 754px, so "For Customers" dropped to a
   second row and the 141px header covered the top of every page. Tighter item padding
   keeps the menu on one row; the dropdown chevron, pulled 15px into the link's right
   padding, moves out of the narrower padding so it does not cover the label. The customer
   pages (the page ids wp-custom.css gives the short customer menu) fit and keep theirs. */
@media only screen and (min-width: 1030px) and (max-width: 1369px) {
    body:not(.page-id-361):not(.page-id-127):not(.page-id-37319):not(.page-id-37317) header.header-primary nav.nav-primary>ul.menu>li>a {
        padding: 28px 6px 20px 6px;
        font-size: .9rem;
    }
    header.header-primary .arrow-down-mobile {
        left: -2px;
        margin-right: 4px;
    }
}

/* "Start using Corjl today" and the other image CTAs: their phone background,
   uploads/2022/02/Rectangle.png, was never exported (403), and the theme script sets it
   inline at 768px and below, which left a flat grey band. Use the desktop image there. */
@media only screen and (max-width: 768px) {
    section.global-cta--image[data-background_image_mobile*="2022/02/Rectangle.png"][data-background_image*="Rectangle-copy"] {
        background-image: url(/wpcdn/corjlweb/webp/uploads/2022/02/Rectangle-copy.png.webp) !important;
        background-size: cover !important;
        background-position: center center !important;
    }
    section.global-cta--image[data-background_image_mobile*="2022/02/Rectangle.png"][data-background_image*="unsplash_Dx1b5ucschA"] {
        background-image: url(/wpcdn/corjlweb/webp/uploads/2022/03/unsplash_Dx1b5ucschA-copy.png.webp) !important;
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* Showcase hero banners: "background-size: 100%" draws the photo at the banner's width,
   so on phones and tablets it is shorter than the banner and repeats with a visible seam. */
@media only screen and (max-width: 1029px) {
    body[class*="term-"] section.component.hero.hero--right.hero--color.hero--sm {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: scroll !important;
    }
}

/* Heroes set to "no top padding" in WordPress (editing-a-design): below 1030px the page
   starts at the top of the screen, under the 78px fixed header, and only the theme's 75px
   section padding keeps text clear of it. Without that padding "3 SIMPLE STEPS" and half
   of "Make it yours." sat under the header on phones and iPads. Give such a hero, when it
   opens the page, room for the header. */
@media only screen and (max-width: 1029px) {
    main.site-main > section.component.hero.component__top-padding-none:first-child {
        padding-top: 6rem !important;
    }
}

/* The same for the opening section of the other pages whose first line sat 3 to 5px under
   the header below 1030px (the theme's 75px against the 78px header): the bottom-aligned
   heroes (designers, sell-on-etsy, corjl-prints), the white hero of resource-packets, the
   wysiwyg header of privacy-policy and the blog post heroes. 6rem leaves the gap the
   other pages have. */
@media only screen and (max-width: 1029px) {
    main.site-main > section.component.hero--bottom:first-child,
    main.site-main > section.component.hero--right.hero--background-white:first-child,
    main.site-main > section.component.wysiwyg:first-child,
    main.site-main > section.single__hero:first-child {
        padding-top: 6rem;
    }
}

/* Large heroes with the text beside the image (.hero--right.hero--lg) have a fixed height
   from 768px up (600px, 700px from 1020px), with the content centred in it. On tablets the
   text column is narrow and the text grew taller than the box: on how-corjl-works and
   editing-a-design the last line ran into the next section. Keep the height as a minimum
   and centre the content with flexbox, so the box grows instead. The small and medium
   heroes (the showcase banners) keep their height: their text fits. */
@media only screen and (min-width: 768px) {
    .hero--right.hero--lg .jumbotron {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: auto;
        min-height: 600px;
    }
}
@media only screen and (min-width: 1020px) {
    .hero--right.hero--lg .jumbotron { min-height: 700px; }
}

/* Text links with an arrow (.btn-text) inherit white-space: nowrap from .btn. A long one
   set the minimum width of its column: on a phone the column grew wider than the screen,
   cutting the text on both sides, and on desktop the hero's text column no longer fitted
   beside its photo, which dropped below it (assist, automate, configure, design,
   distribute, edit, integrate, monetize, organize, platform). */
.btn.btn-text {
    white-space: normal;
    max-width: 100%;
    /* .btn centres its text, which only showed once a link wrapped: keep the alignment of
       the column it sits in. */
    text-align: inherit;
}

/* CTA buttons are 85% of the band; a long label ran past the pill on phones. */
@media only screen and (max-width: 575px) {
    .global-cta__button {
        width: auto;
        min-width: 85%;
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
        white-space: normal;
    }
}

/* FAQ accordions: the plus and minus icons floated after the question and touched its
   last word. Keep them in their own column on the right. The plans page already places
   its circle icons (wp-custom.css); this rule, loaded later, moved them onto the text. */
body:not(.page-id-37900) .accordion__btn {
    position: relative;
    padding-right: 3rem;
}
body:not(.page-id-37900) .accordion__btn > .icon.float-right {
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -0.5em;
}

/* Hero images: .hero--sm gives the media box a 440px minimum height, made for background
   images. An <img> there was stretched to it (platform, resource-packets). */
img.hero-media__media {
    object-fit: contain;
}

/* Embedded videos and long pasted URLs never wider than their column. */
main iframe {
    max-width: 100%;
}
main p a {
    overflow-wrap: anywhere;
}

/* Text and media blocks whose image was left empty in WordPress (background-image: url())
   still kept a 300px media box, which showed as an empty band (contact). */
.text-media .col-12:has(> .text-media__media[style*="url();"]) {
    display: none;
}

/* Contact: the one column of cards shrank to its content, about two thirds of the page,
   with an empty band on the right. */
.page-id-298 .wp-block-columns > section.core.column {
    flex: 1 1 0;
}

/* Showcase card grids: wp-custom.css forces three columns at every width, so on a phone the
   cards were 95px wide and titles cut to one word. Two columns below 576px. */
@media only screen and (max-width: 575px) {
    .tax-showcase-category .card-deck {
        column-count: 2 !important;
    }
}

/* Showcase card grids in Safari (iPhone, iPad and Mac): wp-custom.css makes the grid an
   inline-block, and WebKit sizes the line holding an inline-block multi-column box by its
   unbalanced height, as if every card sat in one column. On a wedding page at 390px the
   grid was 5,460px tall but its row 10,660px, so a blank stretch the height of the grid
   came after the cards. Every width was affected, www.corjl.com too. As a block the grid
   fills the same width and its parent takes its real height. */
.tax-showcase-category .card-deck {
    display: block !important;
}

/* Rails headings ("Create your designs, leave the rest to us." on sell-on-etsy, designers,
   corjl-prints), below 768px: the theme places both lines absolutely, the second at a fixed
   top: 6.5rem, inside a 175px box that .rails clips. On a phone each line wraps to two, so
   the last line was cut off, and line-height 1 made the wrapped lines touch. In the flow
   the box grows with the text; the slide-in still works, it is a GSAP transform. The list's
   default 40px padding, which the absolute lines ignored, would now push them right. */
@media only screen and (max-width: 767px) {
    .rails__list-items {
        padding-left: 0;
    }
    .rails__list-items li:nth-child(n) {
        position: relative;
        top: auto;
    }
    .rails__text {
        line-height: 1.15;
    }
}

/* Mobile menu panel, below 1030px: it opens at left: 20%, but wp-custom.css (and the inline
   copy on a few older pages) sets nav.nav-primary to width: 100% !important for the desktop
   menu, so the right fifth of the panel, with "For Sellers" and "Solutions" in it, was off
   the screen on phones and iPads. 80% ends it at the screen's edge. */
@media only screen and (max-width: 1029px) {
    header.header-primary nav.nav-primary {
        width: 80% !important;
    }

    /* The Platform submenu kept desktop widths in the panel: 462.5px for the list (theme)
       and 400px !important for each link (wp-custom.css), so "Smart digital asset
       management" and the other descriptions ran past the screen on phones. Let them take
       the panel's width. */
    header.header-primary nav.nav-primary > ul.menu > li.dropdown-display-inline,
    header.header-primary nav.nav-primary > ul.menu > li.dropdown-display-inline > ul.sub-menu {
        width: 100%;
    }
    header.header-primary nav.nav-primary .menu-item-20949 .sub-menu-heading a {
        width: auto !important;
    }
}

/* Feature page headings ("Integrate.", "Distribute.", ...) are set to 65px inline in
   WordPress. One word at 65px is wider than a 320px phone's column, so the text block grew
   past both edges of the screen and every line was cut. Scale them down below 383px. */
.text-media__header p[style*="font-size: 65px"] {
    font-size: min(65px, 17vw) !important;
}

/* Pagination on the showcase listings: at 320px the row of page numbers and arrows is
   348px wide and did not wrap, so the page scrolled sideways. */
.pagination .nav-links {
    flex-wrap: wrap;
    justify-content: center;
}

/* Showcase card images get a fixed box from WordPress's width and height attributes,
   which do not match every resized file, so some were drawn squashed or stretched (a
   1.56 photo drawn at 2.37). Fill the same box without distorting the image. */
.blog-post.card a.card-link img {
    object-fit: cover;
}

/* Showcase card grids are CSS columns, and a card could break across two of them: on a
   category with two templates (funeral, pool party) the second card showed its image in
   one column and lost its title and its buttons. */
.tax-showcase-category .card-deck > .card {
    break-inside: avoid;
}

/* Blog post heroes: a single word longer than the screen is wide ("PipPartyPrintables"
   at 320px) ran off the right edge. Let the heading break such a word. Only this heading:
   applied to every heading, it also broke words that fit, in narrow columns
   ("Advantag-es" in features-designers). */
.single__hero-header {
    overflow-wrap: break-word;
}

/* Buttons, every width. The theme's hover slides a white half in with background-image and
   background-position: the text turned teal before the white reached it, so it vanished
   for a moment, and on the red .btn-primary the hover was commented out in style.css, so
   nothing changed at all. Use the site's hover instead, the webapp's: a filled button
   darkens, an outline button fills, in 0.2s, with no slide. */
.btn {
    transition: background-color .2s cubic-bezier(.645, .045, .355, 1), border-color .2s cubic-bezier(.645, .045, .355, 1), color .2s cubic-bezier(.645, .045, .355, 1);
}
.btn.btn-primary:hover,
.btn.btn-secondary:hover,
.btn.btn-tertiary:hover,
.btn.btn-outline-light:hover {
    background-image: none;
}
/* Filled teal ("Edit My Design") and filled red ("Try it for free"). */
.btn.btn-tertiary:hover {
    color: #fff;
    background-color: #075b68;
    border-color: #075b68;
}
/* Every a.btn.btn-tertiary.mb-1 kept teal text on the darker teal (the header's "Edit My
   Design", "Email Billing" on the contact page, "Edit My Design" on editing-a-design):
   WordPress's Additional CSS sets a.btn.btn-tertiary.mb-1:hover to teal with !important
   (wp-custom.css, and inline on three pages), for the old white slide. Only an !important
   rule outranks it; body adds the specificity to win wherever the inline copy sits. */
body a.btn.btn-tertiary.mb-1:hover {
    color: #fff !important;
}
.btn.btn-primary:hover {
    color: #fff;
    background-color: #be3730;
    border-color: #be3730;
}
/* Red outline on white ("Start 15-day free trial", "Back") fills red. */
.btn.btn-secondary:hover {
    color: #fff;
    background-color: #d63e36;
    border-color: #d63e36;
}
/* White outline on the teal footer ("Edit a Design") fills white. */
.btn.btn-outline-light:hover {
    color: #086674;
    background-color: #fff;
    border-color: #fff;
}

/* "VIEW DEMO" on the showcase cards had no hover. wp-custom.css locks its text colour
   with !important, so it darkens like the other teal buttons. */
a.etsy-view-demo {
    transition: background-color .2s cubic-bezier(.645, .045, .355, 1);
}
a.etsy-view-demo:hover {
    background: #075b68;
}

/* Links inside body text ("professional print", "Etsy") showed no hover; underline them,
   as text links on the rewritten pages do. Buttons styled as links keep their own hover. */
p a:not(.btn):hover {
    text-decoration: underline;
}

/* Card titles (showcase grids, blog sliders) are links but showed no hover; underline
   them, as the card titles of the rewritten pages do. */
a.blog-card__title:hover {
    text-decoration: underline;
}

/* FAQ questions (accordion) showed no hover; turn the question teal, as on the
   rewritten pages. The accordions here are all on white or light backgrounds, whose
   colour rule (.component[class*="--background-light"] .accordion__card .accordion__btn)
   this selector has to outrank. */
.component.accordion .accordion__card .accordion__btn:hover {
    color: #086674;
}

/* Header menu, 1030px and up: "Platform", "Solutions" and "Resources" open a dropdown
   and stayed grey on hover, while the other menu links turn teal. */
@media only screen and (min-width: 1030px) {
    header.header-primary nav.nav-primary > ul.menu > li.toggle-dropdown > a:hover {
        color: #086674;
    }
}

/* Mobile menu: the arrows that open a submenu are spans with a click handler and kept the
   text cursor. */
header.header-primary .arrow-down-mobile {
    cursor: pointer;
}

/* Keyboard focus, every width: no focused link or button showed a ring. The theme's
   style.css ends with :focus{outline:0!important;box-shadow:none!important}, and
   .accordion__btn:focus does the same, so Tab moved focus invisibly. Give every control
   the rewritten pages' ring (site.css): 2px #3c99a7, 2px away, white on the teal footer.
   Only an !important rule outranks theirs. The mouse never shows it (:focus-visible). */
:focus-visible,
.accordion__btn:focus-visible {
    outline: 2px solid #3c99a7 !important;
    outline-offset: 2px;
}
.footer :focus-visible {
    outline-color: #fff !important;
}