/* ═══ Blog sidebar ══════════════════════════════════════════════════════════
   One look for the sidebar wherever sidebar.php renders it: single posts,
   category / tag / author archives, search results, the posts index and the
   encyclopedia. These rules began life in blog.css scoped to .single-post,
   which only the post template loads, so every other page showed the
   theme's older grey boxes. They are scoped to the .Sidebar column now and
   loaded by sidebar.php itself (sr_sidebar_stylesheet() in functions.php),
   so a template cannot render the sidebar without them.

   Everything here is sidebar-intrinsic. Page layout (which column the
   sidebar sits in, the tablet 8/4 split) stays with the page's own CSS. */

/* -- the post page's tokens, carried along so the values hold on pages
   that do not define them. Same numbers as blog.css. ---------------------- */
.Sidebar {
    --sr-ink: #141413;
    --sr-text: #3b3b43;
    --sr-muted: #7a7a85;
    --sr-accent: #735ae5;
    --sr-accent-dark: #4f35cf;
    --sr-line: #ebebf0;
    --sr-surface: #f7f6fb;
    --sr-tint: #efeafd;
    --sr-head: "TWKLausanneSemi", "Manrope", sans-serif;
    --sr-body: "ManropeRegular", "Manrope", sans-serif;
    --sr-card-radius: 16px;
    --sr-field-line: #d9d9e0;
    --sr-field-radius: 10px;
    --sr-field-h: 48px;
}

/* -- the boxes: one heading size, one rhythm ------------------------------
   The boxes space themselves with a margin above each, none below: the
   last visible box then never carries a margin into the gap above the next
   band (the theme's script hides the final box at times, which left the
   one before it with a tail). */
.Sidebar .widget h2,
.Sidebar .widget h3,
.Sidebar .widget h4 {
    font-family: var(--sr-head);
    font-size: 18px;
    line-height: 24px;
    color: var(--sr-ink);
}
.Sidebar .widget {
    margin-bottom: 0;
}
.Sidebar .widget + .widget {
    margin-top: 24px;
}
.Sidebar .widget[style*="none"] {
    margin-top: 0;
}
/* -- the last box stays in view while the column scrolls ------------------
   From tablets up the last widget (the lead form, or a banner where one is
   configured) is position:sticky inside the widget area, which is made to
   fill the column's full height so there is room to stick; it stops at the
   column's end on its own. This replaces the theme's scroll handler that
   switched the box to position:fixed and faded or hid it near the bottom -
   it measured the wrong column on most templates and left the box missing
   or overlapping. The .fixedImage rule keeps a cached copy of that script
   harmless. 100px clears the fixed header. */
@media only screen and (min-width: 768px) {
    .Sidebar {
        display: flex;
        flex-direction: column;
    }
    .Sidebar > #secondary.widget-area {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
    }
    .Sidebar #secondary .widget:last-child {
        position: -webkit-sticky;
        position: sticky;
        top: 100px;
        width: auto !important;
        opacity: 1 !important;
    }
    .Sidebar #secondary .widget:last-child.fixedImage {
        position: sticky !important;
        top: 100px !important;
    }
}

/* On phones the sidebar follows the article or the grid, and on the
   archive, search and index pages the footer comes straight after it, so
   the last card needs a gap of its own. (The lead form is filled into the
   last widget by the amp-custom-banner plugin at footer time, on every
   width; nothing here hides it on phones.) */
@media only screen and (max-width: 767px) {
    .archive .Sidebar #secondary,
    .search .Sidebar #secondary,
    .blog .Sidebar #secondary {
        padding-bottom: 32px;
    }
}

/* -- phones: one rhythm between the content and the sidebar ---------------
   Stacked under the article or the grid, the first card sat about 100px
   below the last line. Three things added up, none visible as a box: the
   theme's 40px top padding on the column (0 on posts), a 64px top margin
   on the Follow Us card that collapses up through its widget, and the 24px
   gap the boxes keep even when the box above them is hidden (the banner
   widget is display:none on phones). The column now opens 32px below the
   content on every template, and the boxes are spaced by a flex gap, which
   skips hidden boxes, instead of margins. .row > raises the specificity
   past blog.css's own .Sidebar rule on posts. */
@media only screen and (max-width: 767px) {
    .row > .Sidebar {
        padding-top: 32px;
    }
    /* on a post the article's last block already ends with its own bottom
       margin (22px for a paragraph, 36px for a closing rule), so the column
       adds only a little on top */
    .single-post .row > .Sidebar {
        padding-top: 8px;
    }
    .Sidebar #secondary.widget-area {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .Sidebar #secondary .widget,
    .Sidebar #secondary .widget + .widget {
        margin: 0;
    }
    .Sidebar .sideBarSocialIcons {
        margin-top: 0;
    }
    /* The sidebar banner (block-13, the image linking to sign-up) is shown on
       phones too. style.css hid it with section#block-13{display:none}; the
       id is kept in this selector so it outranks that rule. On a full-width
       phone column the artwork would run 450px tall, so it is capped and
       centred at the width it was drawn for. */
    .Sidebar #secondary section#block-13 {
        display: block;
    }
    .Sidebar .sidebarImage2,
    .Sidebar .sidebarImage1 {
        max-width: 420px;
        margin: 0 auto;
    }
    .Sidebar .sidebarImage2 figure,
    .Sidebar .sidebarImage1 figure {
        margin: 0;
    }
    /* a widget whose content is filled in later (the lead form) or never
       (an empty banner slot) holds no space while empty */
    .Sidebar #secondary .widget:empty,
    .Sidebar #secondary .widget > div:empty {
        display: none;
    }
}

/* -- the cards: the same white card as the rest of the page ---------------
   The Follow Us box was a grey block with loose black icons; it is a
   bordered white card with the icons in tinted discs. The lead form drops
   its background image for the page's lavender tint, on the same corner. */
.Sidebar .sideBarSocialIcons {
    align-items: flex-start;
    padding: 22px 20px;
    border: 1px solid var(--sr-line);
    border-radius: var(--sr-card-radius);
    background: #fff;
}
.Sidebar .sideBarSocialIcons p {
    margin: 0 0 14px;
    font-family: "ManropeMed", var(--sr-body);
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    color: var(--sr-ink);
}
.Sidebar .sideBarSocialIcons .icons {
    gap: 10px;
}
.Sidebar .sideBarSocialIcons .icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sr-tint);
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.Sidebar .sideBarSocialIcons .icons a:hover {
    background: #e3dbff;
    transform: translateY(-1px);
}
.Sidebar .sideBarSocialIcons .icons img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
.Sidebar .sidebarImage2 img,
.Sidebar .sidebarImage1 img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--sr-card-radius);
}
.Sidebar div#otp-form {
    padding: 22px 20px;
    border: 1px solid #e3dbff;
    border-radius: var(--sr-card-radius);
    background: linear-gradient(160deg, #efeafd 0%, #f7f6fb 65%, #ffffff 100%);
}
.Sidebar div#otp-form h3 {
    margin: 0 0 14px;
    font-family: var(--sr-head);
    font-size: 18px;
    line-height: 24px;
    color: var(--sr-ink);
}
.Sidebar div#mobile-section p.m0,
.Sidebar div#otp-form p.colorBlack {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 17px;
    color: var(--sr-muted);
}
.Sidebar div#otp-form button:not(#resend-otp):not(.social-btn) {
    margin-top: 14px;
}

/* -- fields: one box for everything the reader can type in ----------------
   The search box, the category button and the phone field each drew their
   own box. One field now: 48px tall, 10px corners, one hairline, the text
   face, and the same purple focus ring. Buttons match it. */
.Sidebar .widget_searchNew input.js-live-search,
.Sidebar .mainBlogFilterButtonOne .widget_searchNew input#searchInput,
.Sidebar .form-field input,
.Sidebar .prefixNum {
    box-sizing: border-box;
    height: var(--sr-field-h);
    padding: 0 14px;
    border: 1px solid var(--sr-field-line);
    border-radius: var(--sr-field-radius);
    background-color: #fff;
    font-family: var(--sr-body);
    font-size: 15px;
    line-height: 20px;
    color: var(--sr-ink);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.Sidebar .widget_searchNew input.js-live-search,
.Sidebar .mainBlogFilterButtonOne .widget_searchNew input#searchInput {
    padding-left: 42px;
}
.Sidebar .prefixNum {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}
.Sidebar .prefixNum span {
    margin-right: 8px;
    padding-right: 10px;
    border-right: 1px solid var(--sr-field-line);
    font-size: 15px;
    color: var(--sr-ink);
}
.Sidebar .prefixNum input,
.Sidebar .prefixNum input:focus {
    height: auto;
    font-size: 15px;
    color: var(--sr-ink);
}
/* Chrome paints an autofilled input pale blue and ignores background-color,
   so a remembered value showed as a blue block inside the white field. An
   inset shadow is the only thing that covers it; the long transition stops
   it flashing back. */
.Sidebar .prefixNum input:-webkit-autofill,
.Sidebar .prefixNum input:-webkit-autofill:hover,
.Sidebar .prefixNum input:-webkit-autofill:focus,
.Sidebar .form-field input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: var(--sr-ink);
    caret-color: var(--sr-ink);
    transition: background-color 9999s ease-in-out 0s;
}
.Sidebar input.otp-digit {
    width: 38px;
    height: 44px;
    border: 1px solid var(--sr-field-line);
    border-radius: var(--sr-field-radius);
    font-family: var(--sr-body);
    font-size: 16px;
    color: var(--sr-ink);
}
.Sidebar .widget_searchNew input::placeholder,
.Sidebar .form-field input::placeholder,
.Sidebar .prefixNum input::placeholder {
    color: var(--sr-muted);
    opacity: 1;
}
.Sidebar .widget_searchNew input.js-live-search:focus,
.Sidebar .mainBlogFilterButtonOne .widget_searchNew input#searchInput:focus,
.Sidebar .form-field input:focus,
.Sidebar .prefixNum:focus-within,
.Sidebar input.otp-digit:focus {
    outline: none;
    border-color: var(--sr-accent);
    box-shadow: 0 0 0 4px rgba(115, 90, 229, 0.12);
    transform: none;
}
/* The phone number sits inside .prefixNum, which is the visible field and
   carries the focus ring above. The input itself is bare text: without this
   the generic field rules gave it a second box - a 48px height and the same
   ring - drawn inside the first. */
.Sidebar .form-field .prefixNum input,
.Sidebar .form-field .prefixNum input:focus {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
}
/* ...except that autofill still needs its white inset cover */
.Sidebar .form-field .prefixNum input:-webkit-autofill,
.Sidebar .form-field .prefixNum input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
}
/* the category button is the search box's twin */
.Sidebar .mainBlogFilterButtonOne .search .sr-cat__btn {
    height: var(--sr-field-h);
    padding: 0 14px;
    border: 1px solid var(--sr-field-line);
    border-radius: var(--sr-field-radius);
    font-family: var(--sr-body);
    font-size: 15px;
    font-weight: 400;
    color: var(--sr-ink);
}
.Sidebar .mainBlogFilterButtonOne .search .sr-cat__input {
    font-family: var(--sr-body);
}

/* -- buttons: the fields' height and corners, the accent as the fill ----- */
.Sidebar #otp-form button:not(#resend-otp):not(.social-btn) {
    box-sizing: border-box;
    min-height: var(--sr-field-h);
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--sr-field-radius);
    background: var(--sr-accent);
    color: #fff;
    font-family: "ManropeMed", var(--sr-body);
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.Sidebar #otp-form button:not(#resend-otp):not(.social-btn):hover:not(:disabled) {
    background: var(--sr-accent-dark);
}