/* ================================================================
 * CANADEM Notes — Sticky Note Styles v2.3
 * CodePen reference: https://codepen.io/dillonbrady/pen/EgRoZQ
 * (site font retained; Satisfy font NOT used)
 * ================================================================ */

/* ── Pin — blue thumbtack image ────────────────────────────────── */

.canadem-note-wrap {
    position: relative;
    padding-top: 50px;          /* room for the pin (sits at top: 20px, 56px tall) */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
}

/* The pin <i> element — shows the blue thumbtack PNG */
.canadem-note-pin {
    display: block;
    width: 46px;
    height: 56px;
    position: absolute;
    left: 50%;
    top: 40px;                  /* sits right on the note */
    z-index: 10;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-image: url('pin.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.35));
}

/* Hide the old CSS pseudo-element pin parts */
.canadem-note-pin::before,
.canadem-note-pin::after {
    display: none !important;
    content: none !important;
}

/* ── Sticky Note Card ──────────────────────────────────────────── */

.canadem-sticky-note {
    background: #eae672;
    color: #333;
    padding: 22px 20px 18px;
    box-shadow: 0 10px 10px 2px rgba(0,0,0,.3);
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
    -webkit-transition: -webkit-transform .3s ease, box-shadow .3s ease;
    -moz-transition: -moz-transform .3s ease, box-shadow .3s ease;
    transition: transform .3s ease, box-shadow .3s ease;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-height: 180px;
    box-sizing: border-box;
    text-decoration: none;
    position: relative;
    z-index: 1;
}

.canadem-sticky-note:hover {
    -webkit-transform: rotate(0deg) scale(1.05);
    -moz-transform: rotate(0deg) scale(1.05);
    -ms-transform: rotate(0deg) scale(1.05);
    -o-transform: rotate(0deg) scale(1.05);
    transform: rotate(0deg) scale(1.05);
    box-shadow: 0 15px 22px 4px rgba(0,0,0,.35);
    z-index: 20;
    position: relative;
}

/* Alternating tilt: odd = +2deg, even = -2deg */
.canadem-note-wrap:nth-child(odd) .canadem-sticky-note,
.swiper-slide:nth-child(odd) .canadem-note-wrap .canadem-sticky-note {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
}
.canadem-note-wrap:nth-child(even) .canadem-sticky-note,
.swiper-slide:nth-child(even) .canadem-note-wrap .canadem-sticky-note {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
}
.canadem-note-wrap:nth-child(odd) .canadem-sticky-note:hover,
.canadem-note-wrap:nth-child(even) .canadem-sticky-note:hover,
.swiper-slide .canadem-note-wrap .canadem-sticky-note:hover {
    -webkit-transform: rotate(0deg) scale(1.05);
    transform: rotate(0deg) scale(1.05);
}

/* ── Note Typography (site font, not Satisfy) ──────────────────── */

.canadem-sticky-note .note-cats {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: .55;
    margin-bottom: 8px;
    line-height: 1.4;
}
.canadem-sticky-note .note-cats a {
    color: #333;
    text-decoration: none;
}

.canadem-sticky-note .note-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #333;
    line-height: 1.4;
}
.canadem-sticky-note .note-title a {
    color: #333;
    text-decoration: none;
}
.canadem-sticky-note .note-title a:hover {
    text-decoration: underline;
}

.canadem-sticky-note .note-date {
    font-size: 11px;
    opacity: .6;
    margin-bottom: 10px;
}

.canadem-sticky-note .note-excerpt {
    font-size: 13px;
    line-height: 1.6;
    color: #555;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-bottom: 14px;
}

.canadem-sticky-note .note-read-more {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #333;
    text-decoration: underline;
    margin-top: auto;
    -ms-flex-item-align: start;
    align-self: flex-start;
}

/* ── Cork Board Container — 80px top & bottom ──────────────────── */

.canadem-sticky-board {
    background-image: url('cork-tile.jpg');
    background-repeat: repeat;
    background-size: auto;
    padding: 80px 50px 80px;    /* 80px top/bottom requested */
    border-radius: 6px;
    position: relative;
}

/* ================================================================
 * NOTES GRID  ( /notes/ page )
 * ================================================================ */

.elementor-widget-canadem-notes-grid .d-grid,
.canadem-tax-grid {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 50px;             /* more breathing room between notes */
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}

.elementor-widget-canadem-notes-grid .grid-item,
.canadem-tax-grid .grid-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

/* Grid: hide dates */
.elementor-widget-canadem-notes-grid .note-date,
.canadem-tax-grid .note-date {
    display: none !important;
}

/* Grid: larger title */
.elementor-widget-canadem-notes-grid .canadem-sticky-note .note-title,
.elementor-widget-canadem-notes-grid .note-title,
.canadem-tax-grid .note-title {
    font-size: 22px !important;
    line-height: 1.3;
    margin-bottom: 12px;
}

/* ================================================================
 * TAXONOMY ARCHIVE  ( /notes-section/... )
 * ================================================================ */

.canadem-tax-archive {
    padding: 0 20px;
}

.canadem-tax-header {
    max-width: 860px;
    margin: 0 auto 50px;
    text-align: center;
}

.canadem-tax-header h1 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.2;
    margin-bottom: 12px;
}

.canadem-tax-header p {
    font-size: 1rem;
    opacity: .7;
    max-width: 600px;
    margin: 0 auto;
}

.canadem-tax-archive .elementor-post-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.canadem-tax-archive .pagination {
    text-align: center;
    margin: 40px auto;
}

/* ================================================================
 * RECENT POSTS CAROUSEL  ( bottom of single note pages )
 * ================================================================ */

.canadem-notes-recent-posts {
    margin-top: 70px;
}

/* "Recent Posts" heading — black, 20px gap below */
.canadem-notes-recent-posts .canadem-notes-recent-heading,
body.single-canadem_note .canadem-notes-recent-heading {
    margin-bottom: 20px !important;
}

.canadem-notes-recent-posts .canadem-notes-recent-heading h4,
.canadem-notes-recent-posts .canadem-notes-recent-heading .elementor-heading-title,
body.single-canadem_note .canadem-notes-recent-heading h4,
body.single-canadem_note .canadem-notes-recent-heading * {
    color: #000000 !important;
    margin-bottom: 0 !important;
}

.canadem-notes-recent-posts .canadem-sticky-board {
    overflow: visible;
}

.canadem-notes-recent-posts .swiper-wrapper {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 0 0 10px;
}

.canadem-notes-recent-posts .swiper-slide {
    height: auto;
}

.canadem-notes-recent-posts .swiper-slide .canadem-note-wrap {
    height: 100%;
}

/* ================================================================
 * SINGLE NOTE PAGES  ( body.single-canadem_note )
 * ================================================================ */

/* Remove sidebar */
body.single-canadem_note #secondary,
body.single-canadem_note .sidebar,
body.single-canadem_note #sidebar {
    display: none !important;
}

/* Full-width primary */
body.single-canadem_note #primary.content-area {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.single-canadem_note .site-content > .wrap,
body.single-canadem_note .site-content > .container {
    display: block !important;
}

/* Hide the theme's H1 charix-title — our entry-title already shows it */
body.single-canadem_note h1.charix-title,
body.single-canadem_note .charix-title,
body.single-canadem_note .breadcrumb .charix-title {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Centre the header + 20px gap below it */
body.single-canadem_note .single-stories-header {
    max-width: 860px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 20px !important;
    padding-left: 20px;
    padding-right: 20px;
}

/* Entry title — H4, not giant H2/gamma size */
body.single-canadem_note h4.entry-title,
body.single-canadem_note h4.gamma.entry-title,
body.single-canadem_note .entry-title {
    font-size: clamp(1.35rem, 2.8vw, 1.85rem) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    font-weight: 700 !important;
}

/* Content H2s scaled down from theme beta (60–90px) */
body.single-canadem_note .single-stories-content h2,
body.single-canadem_note #main h2:not(.entry-title) {
    font-size: clamp(1.15rem, 2.4vw, 1.55rem) !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
}

/* Content area centred */
body.single-canadem_note .single-stories-content {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Carousel wrapper centred */
body.single-canadem_note .canadem-notes-recent-posts {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

/* ================================================================
 * RESPONSIVE
 * ================================================================ */

/* Tablet */
@media (max-width: 1024px) {
    .elementor-widget-canadem-notes-grid .d-grid,
    .canadem-tax-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px 40px;
    }
    .canadem-sticky-board {
        padding: 60px 35px 60px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .elementor-widget-canadem-notes-grid .d-grid,
    .canadem-tax-grid {
        grid-template-columns: 1fr;
        gap: 45px 0;
    }
    .canadem-sticky-board {
        padding: 50px 18px 50px;
    }
    .canadem-notes-recent-posts .canadem-sticky-board {
        padding: 50px 15px 50px;
    }
    body.single-canadem_note .single-stories-header,
    body.single-canadem_note .single-stories-content {
        padding-left: 15px;
        padding-right: 15px;
    }
    .canadem-sticky-note {
        min-height: 150px;
    }
    .canadem-sticky-note .note-title {
        font-size: 15px !important;
    }
    .elementor-widget-canadem-notes-grid .canadem-sticky-note .note-title,
    .canadem-tax-grid .note-title {
        font-size: 18px !important;
    }
    .canadem-note-pin {
        width: 36px;
        height: 44px;
    }
}

/* ================================================================
 * TASK 4: Stretched link — entire sticky note card is clickable
 * The .note-title a::after overlay covers the whole card.
 * Category links and read-more sit above via z-index: 2.
 * ================================================================ */

.canadem-sticky-note {
    cursor: pointer;
}

/* The card surface overlay — attached to title link */
.canadem-sticky-note .note-title a::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

/* Clickable elements that must remain interactive above the overlay */
.canadem-sticky-note .note-cats,
.canadem-sticky-note .note-cats a,
.canadem-sticky-note .note-read-more {
    position: relative;
    z-index: 2;
}