.elementor-17660 .elementor-element.elementor-element-99bb2c4 > .elementor-container > .elementor-row{align-items:stretch;}/* Start custom CSS for html, class: .elementor-element-e55a124 *//************************************************************
 *  ELEVATING FUTURES – CLEAN A5 HANDBOOK CSS
 *  Mode: Flexible Height + A5 Styled + Simple Print
 *  Layout Version: Option B (white cover, teal accents)
 *  Compatible With: WordPress + Elementor (frontend + print)
 ************************************************************/

/* ----------------------------------------------------------
   1. DESIGN TOKENS / BRAND VARIABLES
-----------------------------------------------------------*/
:root {
    --ddp-brand:        #375f64;
    --ddp-brand-light:  #e6f0f2;
    --ddp-text-main:    #374151;
    --ddp-text-muted:   #6b7280;
    --ddp-border-soft:  #d1d5db;
    --ddp-shadow-soft:  0 4px 12px rgba(0,0,0,0.12);
    --ddp-page-bg:      #ffffff;
    --ddp-body-bg:      #f3f4f6;
    --ddp-font-main:    system-ui, -apple-system, BlinkMacSystemFont,
                        "Segoe UI", sans-serif;
}

/* ----------------------------------------------------------
   2. SCOPE WRAPPER
-----------------------------------------------------------*/
.ddp-book {
    font-family: var(--ddp-font-main);
    background: transparent;
    color: var(--ddp-text-main);
}

/* optional: grey background behind the book on screen */
.ddp-book-wrapper-bg {
    background-color: var(--ddp-body-bg);
}

/* ----------------------------------------------------------
   3. TYPOGRAPHY / UTILITY CLASSES
-----------------------------------------------------------*/
.ddp-book .font-semibold   { font-weight: 600; }
.ddp-book .font-extrabold  { font-weight: 800; }
.ddp-book .font-light      { font-weight: 300; }
.ddp-book .italic          { font-style: italic; }

.ddp-book .text-xs   { font-size: 0.75rem; }
.ddp-book .text-sm   { font-size: 0.875rem; }
.ddp-book .text-base { font-size: 1rem; }
.ddp-book .text-lg   { font-size: 1.125rem; }
.ddp-book .text-xl   { font-size: 1.25rem; }
.ddp-book .text-2xl  { font-size: 1.5rem; }

.ddp-book .text-brand    { color: var(--ddp-brand) !important; }
.ddp-book .text-gray-600 { color: #4b5563 !important; }
.ddp-book .text-gray-700 { color: #374151 !important; }
.ddp-book .text-blue-700 { color: #1d4ed8 !important; }

.ddp-book .bg-brand         { background-color: var(--ddp-brand); }
.ddp-book .bg-brand-light   { background-color: var(--ddp-brand-light); }
.ddp-book .border-brand     { border-color: var(--ddp-brand); }
.ddp-book .border-brand-light { border-color: var(--ddp-brand-light); }

.ddp-book .space-y-4 > * + * { margin-top: 1rem; }
.ddp-book .space-y-5 > * + * { margin-top: 1.25rem; }
.ddp-book .space-y-6 > * + * { margin-top: 1.5rem; }

.ddp-book .pt-8  { padding-top: 2rem; }
.ddp-book .pt-10 { padding-top: 2.5rem; }
.ddp-book .pt-20 { padding-top: 5rem; }
.ddp-book .pb-8  { padding-bottom: 2rem; }

.ddp-book img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* misc alignment helpers */
.ddp-book .text-center { text-align: center; }
.ddp-book .text-right  { text-align: right; }
.ddp-book .mx-auto     { margin-left: auto; margin-right: auto; }

.ddp-book .grid { display: grid; }
.ddp-book .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ddp-book .gap-x-12 { column-gap: 3rem; }

@media (max-width: 768px) {
    .ddp-book .grid-cols-2 { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------
   4. PRINT BUTTON (SCREEN ONLY)
-----------------------------------------------------------*/
.ddp-book .print-button {
    background-color: #e5e7eb;
    text-align: center;
    padding: 1rem;
    margin: 0 auto 1.5rem auto;
    max-width: 960px;
    border-radius: 0.5rem;
}

.ddp-book .print-button button {
    background-color: var(--ddp-brand);
    color: #ffffff;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

@media print {
    .ddp-book .print-button {
        display: none !important;
    }
}

/* ----------------------------------------------------------
   5. PAGE LAYOUT – FLEXIBLE A5-STYLE
-----------------------------------------------------------*/
.ddp-book .a5-container {
    width: 100%;
    margin: 0 auto 2rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ddp-book .page-wrapper {
    width: 100%;
    max-width: 148mm;          /* A5-ish width on desktop */
    min-height: 210mm;         /* visual A5 height, but content may extend */
    height: auto;
    margin: 0 auto 16px auto;
    background: var(--ddp-page-bg);
    border: 1px solid #e5e7eb;
    box-shadow: var(--ddp-shadow-soft);
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
}

.ddp-book .content-area {
    flex: 1 1 auto;
    padding: 15mm;
    box-sizing: border-box;
    overflow: visible;
    font-size: 0.875rem;
    line-height: 1.5;
}

.ddp-book .header-content,
.ddp-book .footer-content {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4mm 15mm;
    font-size: 0.75rem;
    color: var(--ddp-text-muted);
    border-color: var(--ddp-brand-light);
}

/* white cover with teal text – Option B */
.ddp-book .page-wrapper.page-cover {
    background-color: #ffffff !important;
    color: var(--ddp-brand) !important;
}

.ddp-book .page-cover h1,
.ddp-book .page-cover h2 {
    color: var(--ddp-brand) !important;
}

/* ----------------------------------------------------------
   6. RESPONSIVE (MOBILE)
-----------------------------------------------------------*/
@media (max-width: 768px) {
    .ddp-book .page-wrapper {
        max-width: 100%;
        width: 100%;
        min-height: auto;
        margin: 0 0 12px 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
    }

    .ddp-book .content-area {
        padding: 16px;
    }

    .ddp-book .header-content,
    .ddp-book .footer-content {
        padding: 8px 16px;
    }
}

/* ----------------------------------------------------------
   7. TABLES (Appendices)
-----------------------------------------------------------*/
.ddp-book table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.ddp-book th,
.ddp-book td {
    border: 1px solid var(--ddp-border-soft);
    padding: 4px 6px;
}

/* ----------------------------------------------------------
   8. PRINT STYLES – ONLY PRINT THE BOOK
-----------------------------------------------------------*/
@media print {

    /* 1. Hide everything on the page except the book */
    body * {
        visibility: hidden !important;
    }

    .ddp-book,
    .ddp-book * {
        visibility: visible !important;
    }

    /* 2. Position book at the top-left for printing */
    .ddp-book {
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .ddp-book .a5-container {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* 3. Each .page-wrapper = one printed page */
    .ddp-book .page-wrapper {
        max-width: 100% !important;
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        page-break-after: always !important;
        page-break-inside: avoid !important;
    }

    .ddp-book .content-area {
        padding: 12mm !important;
    }

    /* 4. Better colour fidelity */
    body {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}/* End custom CSS */