/*
========================================================
Tradie Blueprint Ebook
ebook.css
Version: 1.0
Author: Calvin
========================================================
*/

/*======================================================
ROOT VARIABLES
======================================================*/

:root{

    --primary:#143B63;
    --primary-dark:#0F2E4D;
    --secondary:#1D6FA5;

    --accent:#F4A300;

    --success:#2E8B57;

    --warning:#F39C12;

    --danger:#C0392B;

    --light:#F8F9FA;

    --lighter:#FCFCFC;

    --border:#D9DEE5;

    --text:#2E2E2E;

    --text-light:#666;

    --heading:#143B63;

    --shadow:0 6px 20px rgba(0,0,0,.08);

    --radius:10px;

}

/*======================================================
RESET
======================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    color:var(--text);

    font-size:14px;

    line-height:1.75;

    background:#fff;

}

/*======================================================
PRINT
======================================================*/

@page{

    size:A4;

    margin:18mm;

}

.page{

    page-break-after:always;

}

/*======================================================
TYPOGRAPHY
======================================================*/

h1,h2,h3,h4,h5{

    color:var(--heading);

    font-weight:700;

    line-height:1.3;

    margin-bottom:15px;

}

h1{

    font-size:34px;

}

h2{

    font-size:26px;

    margin-top:40px;

}

h3{

    font-size:20px;

    margin-top:25px;

}

h4{

    font-size:17px;

}

p{

    margin-bottom:16px;

    text-align:justify;

}

strong{

    color:var(--primary);

}

small{

    color:var(--text-light);

}

/*======================================================
LINKS
======================================================*/

a{

    color:var(--secondary);

    text-decoration:none;

}

a:hover{

    text-decoration:underline;

}

/*======================================================
LIST
======================================================*/

ul{

    margin-left:25px;

    margin-bottom:20px;

}

li{

    margin-bottom:8px;

}

/*======================================================
IMAGES
======================================================*/

img{

    max-width:100%;

    display:block;

}

.hero-image{

    width:100%;

    border-radius:12px;

    margin-bottom:25px;

}

/*======================================================
CONTAINER
======================================================*/

.container{

    width:100%;

    max-width:1000px;

    margin:auto;

}

/*======================================================
COVER PAGE
======================================================*/

.cover{

    height:270mm;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:white;

}

.cover h1{

    color:white;

    font-size:42px;

    margin-bottom:20px;

}

.cover h2{

    color:white;

    font-weight:400;

    margin-top:0;

}

.cover .edition{

    margin-top:60px;

    font-size:18px;

    letter-spacing:2px;

}

.cover .author{

    margin-top:80px;

    font-size:18px;

}

/*======================================================
HEADER
======================================================*/

.header{

    border-bottom:3px solid var(--primary);

    padding-bottom:15px;

    margin-bottom:35px;

}

.header h1{

    margin-bottom:8px;

}

.subtitle{

    color:#777;

}

/*======================================================
CHAPTER BANNER
======================================================*/

.chapter-banner{

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    color:white;

    padding:28px;

    border-radius:12px;

    margin-bottom:30px;

    box-shadow:var(--shadow);

}

.chapter-banner h1{

    color:white;

    font-size:34px;

}

.chapter-banner p{

    color:white;

    margin:0;

    opacity:.95;

}

/*======================================================
SUMMARY DASHBOARD
======================================================*/

.summary-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-bottom:35px;

}

.summary-card{

    background:var(--light);

    border:1px solid var(--border);

    border-left:6px solid var(--primary);

    border-radius:10px;

    padding:18px;

}

.summary-card h3{

    margin:0;

    font-size:16px;

    color:var(--primary);

}

.summary-card .value{

    margin-top:8px;

    font-size:20px;

    font-weight:bold;

}

/*======================================================
SECTION TITLE
======================================================*/

.section-title{

    border-left:8px solid var(--primary);

    padding-left:14px;

    margin-top:45px;

    margin-bottom:20px;

}

/*======================================================
CARDS
======================================================*/

.card{

    background:white;

    border:1px solid var(--border);

    border-radius:10px;

    padding:22px;

    margin-bottom:20px;

    box-shadow:var(--shadow);

}

/*======================================================
GRID
======================================================*/

.grid-2{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.grid-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}

/*======================================================
TABLE
======================================================*/

table{

    width:100%;

    border-collapse:collapse;

    margin:25px 0;

}

thead{

    background:var(--primary);

    color:white;

}

th{

    padding:14px;

    text-align:left;

    font-size:14px;

}

td{

    border:1px solid var(--border);

    padding:14px;

}

tbody tr:nth-child(even){

    background:#fafafa;

}

/*======================================================
HORIZONTAL RULE
======================================================*/

hr{

    border:none;

    border-top:1px solid var(--border);

    margin:35px 0;

}

/*======================================================
UTILITY
======================================================*/

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.text-primary{

    color:var(--primary);

}

.mt-20{

    margin-top:20px;

}

.mt-40{

    margin-top:40px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-40{

    margin-bottom:40px;

}

.bold{

    font-weight:bold;

}

/*Part 2*/
/*======================================================
TIP / INFO / WARNING BOXES
======================================================*/

.tip-box,
.info-box,
.warning-box,
.success-box{

    display:flex;
    align-items:flex-start;
    gap:16px;

    padding:20px;

    margin:25px 0;

    border-radius:10px;

    border-left:6px solid;

}

.tip-box{

    background:#EDF8FF;
    border-color:#3498DB;

}

.info-box{

    background:#F4F7FA;
    border-color:var(--secondary);

}

.warning-box{

    background:#FFF7E8;
    border-color:var(--warning);

}

.success-box{

    background:#EDF9F1;
    border-color:var(--success);

}

.box-icon{

    font-size:30px;
    flex-shrink:0;

}

.box-content{

    flex:1;

}

.box-content h4{

    margin-top:0;
    margin-bottom:8px;

}

/*======================================================
BUSINESS HIGHLIGHT PANEL
======================================================*/

.business-highlight{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    padding:30px;

    border-radius:12px;

    margin:35px 0;

    box-shadow:var(--shadow);

}

.business-highlight h2,
.business-highlight h3{

    color:#fff;

}

.business-highlight p{

    color:#fff;

}

/*======================================================
CHECKLIST
======================================================*/

.checklist{

    list-style:none;

    margin:0;
    padding:0;

}

.checklist li{

    display:flex;
    align-items:flex-start;

    margin-bottom:12px;

}

.checklist li::before{

    content:"✓";

    color:var(--success);

    font-weight:bold;

    font-size:18px;

    margin-right:12px;

}

/*======================================================
WARNING LIST
======================================================*/

.warning-list{

    list-style:none;

    margin:0;
    padding:0;

}

.warning-list li{

    display:flex;

    margin-bottom:12px;

}

.warning-list li::before{

    content:"⚠";

    margin-right:12px;

}

/*======================================================
TOOL GRID
======================================================*/

.tool-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

    margin:25px 0;

}

.tool-card{

    border:1px solid var(--border);

    border-radius:10px;

    overflow:hidden;

    background:#fff;

    box-shadow:var(--shadow);

}

.tool-card img{

    width:100%;
    height:220px;
    object-fit:cover;

}

.tool-body{

    padding:18px;

}

.tool-title{

    font-size:18px;
    font-weight:bold;

    color:var(--primary);

    margin-bottom:10px;

}

.tool-price{

    color:var(--success);

    font-size:20px;

    font-weight:bold;

    margin-top:15px;

}

/*======================================================
PRICE CARD
======================================================*/

.price-card{

    background:#fff;

    border:2px solid var(--primary);

    border-radius:12px;

    padding:30px;

    text-align:center;

    box-shadow:var(--shadow);

}

.price-card h2{

    margin-top:0;

}

.price{

    font-size:42px;

    color:var(--success);

    font-weight:bold;

    margin:20px 0;

}

/*======================================================
STARTUP COST GRID
======================================================*/

.startup-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin:30px 0;

}

.startup-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:10px;

    text-align:center;

    padding:25px;

    box-shadow:var(--shadow);

}

.startup-card h3{

    margin-top:0;

}

.startup-value{

    font-size:30px;

    color:var(--primary);

    font-weight:bold;

}

/*======================================================
PROFIT PANEL
======================================================*/

.profit-panel{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin:30px 0;

}

.profit-box{

    background:#fff;

    border:1px solid var(--border);

    border-radius:10px;

    text-align:center;

    padding:20px;

}

.profit-box .number{

    font-size:28px;

    color:var(--success);

    font-weight:bold;

}

/*======================================================
RATING BADGES
======================================================*/

.badge{

    display:inline-block;

    padding:8px 15px;

    border-radius:30px;

    font-size:13px;

    font-weight:bold;

}

.badge-primary{

    background:var(--primary);

    color:#fff;

}

.badge-success{

    background:var(--success);

    color:#fff;

}

.badge-warning{

    background:var(--warning);

    color:#fff;

}

.badge-danger{

    background:var(--danger);

    color:#fff;

}

/*======================================================
QUOTE BLOCK
======================================================*/

blockquote{

    margin:30px 0;

    padding:25px;

    border-left:6px solid var(--primary);

    background:#F7F8FA;

    font-style:italic;

}

/*======================================================
TIMELINE
======================================================*/

.timeline{

    position:relative;

    margin:40px 0;

    padding-left:40px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:12px;

    top:0;

    bottom:0;

    width:4px;

    background:var(--primary);

}

.timeline-item{

    position:relative;

    margin-bottom:30px;

}

.timeline-item::before{

    content:"";

    position:absolute;

    left:-35px;

    top:4px;

    width:16px;

    height:16px;

    background:var(--primary);

    border-radius:50%;

}

.timeline-item h4{

    margin-top:0;

}

/*======================================================
WORKFLOW STEPS
======================================================*/

.workflow{

    counter-reset:step;

}

.workflow-step{

    position:relative;

    padding-left:70px;

    margin-bottom:35px;

}

.workflow-step::before{

    counter-increment:step;

    content:counter(step);

    position:absolute;

    left:0;

    top:0;

    width:45px;

    height:45px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:bold;

}

/*======================================================
EQUIPMENT TABLE
======================================================*/

.equipment-table td:first-child{

    width:55%;

    font-weight:600;

}

.equipment-table td:last-child{

    text-align:right;

}

/*======================================================
FEATURE PANEL
======================================================*/

.feature-panel{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin:30px 0;

}

.feature{

    background:#fff;

    border:1px solid var(--border);

    border-radius:10px;

    text-align:center;

    padding:20px;

}

.feature-icon{

    font-size:36px;

    margin-bottom:15px;

}

.feature-title{

    font-weight:bold;

    color:var(--primary);

}

/*======================================================
DIVIDER TITLE
======================================================*/

.divider-title{

    position:relative;

    text-align:center;

    margin:50px 0;

}

.divider-title span{

    background:#fff;

    padding:0 20px;

    position:relative;

    z-index:2;

    font-size:22px;

    color:var(--primary);

    font-weight:bold;

}

.divider-title::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:50%;

    height:2px;

    background:var(--border);

}

/*======================================================
AUTHOR TIP
======================================================*/

.author-tip{

    background:#FFFCE8;

    border-left:6px solid var(--accent);

    padding:20px;

    margin:30px 0;

    border-radius:8px;

}

.author-tip h4{

    margin-top:0;

    color:#8A5B00;

}

/*Part 3*/
/*======================================================
TABLE OF CONTENTS
======================================================*/

.toc{

    margin-top:40px;

}

.toc h2{

    margin-bottom:30px;

}

.toc table{

    border-collapse:collapse;

}

.toc td{

    border:none;

    padding:12px 0;

}

.toc td:last-child{

    text-align:right;

    width:80px;

    font-weight:bold;

}

.toc tr{

    border-bottom:1px dotted #bbb;

}

/*======================================================
HEADER / FOOTER
======================================================*/

.page-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:2px solid var(--border);

    padding-bottom:10px;

    margin-bottom:30px;

}

.page-header .logo{

    font-size:20px;

    font-weight:bold;

    color:var(--primary);

}

.page-header .chapter{

    color:#666;

}

.page-footer{

    margin-top:50px;

    padding-top:10px;

    border-top:1px solid var(--border);

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:12px;

    color:#777;

}

.page-number{

    font-weight:bold;

}

/*======================================================
CHAPTER INTRODUCTION PANEL
======================================================*/

.chapter-intro{

    background:#F8FBFF;

    border-left:8px solid var(--primary);

    padding:25px;

    border-radius:10px;

    margin-bottom:35px;

}

.chapter-intro p:last-child{

    margin-bottom:0;

}

/*======================================================
IMAGE GALLERY
======================================================*/

.gallery{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

    margin:30px 0;

}

.gallery img{

    border-radius:10px;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}

.figure{

    margin:25px 0;

}

.figure img{

    width:100%;

    border-radius:10px;

    border:1px solid var(--border);

}

.caption{

    text-align:center;

    color:#666;

    font-size:13px;

    margin-top:8px;

}

/*======================================================
QR CODE PANEL
======================================================*/

.qr-box{

    display:flex;

    align-items:center;

    gap:25px;

    border:2px dashed var(--border);

    border-radius:10px;

    padding:20px;

    margin:30px 0;

}

.qr-box img{

    width:120px;

    height:120px;

}

.qr-content{

    flex:1;

}

/*======================================================
COMPARISON TABLE
======================================================*/

.compare-table th{

    text-align:center;

}

.compare-table td{

    text-align:center;

}

.compare-table td:first-child{

    text-align:left;

    font-weight:bold;

}

/*======================================================
STATISTICS BAR
======================================================*/

.stats{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:20px;

    margin:35px 0;

}

.stat{

    background:#fff;

    border:1px solid var(--border);

    border-radius:10px;

    padding:20px;

    text-align:center;

    box-shadow:var(--shadow);

}

.stat-value{

    font-size:32px;

    font-weight:bold;

    color:var(--primary);

}

.stat-label{

    margin-top:8px;

    color:#666;

}

/*======================================================
BUSINESS CHECKLIST
======================================================*/

.business-checklist{

    border:1px solid var(--border);

    border-radius:10px;

    overflow:hidden;

    margin:30px 0;

}

.business-checklist .row{

    display:flex;

    border-bottom:1px solid var(--border);

}

.business-checklist .row:last-child{

    border-bottom:none;

}

.business-checklist .tick{

    width:60px;

    text-align:center;

    padding:15px;

    border-right:1px solid var(--border);

}

.business-checklist .text{

    flex:1;

    padding:15px;

}

/*======================================================
PAGE BREAK UTILITIES
======================================================*/

.page-break{

    page-break-before:always;

}

.page-break-after{

    page-break-after:always;

}

.no-break{

    page-break-inside:avoid;

    break-inside:avoid;

}

.keep-together{

    page-break-inside:avoid;

}

.avoid-break{

    break-inside:avoid;

}

/*======================================================
PRINT FRIENDLY IMAGES
======================================================*/

img{

    page-break-inside:avoid;

}

table{

    page-break-inside:auto;

}

tr{

    page-break-inside:avoid;

}

thead{

    display:table-header-group;

}

tfoot{

    display:table-footer-group;

}

/*======================================================
CODE BLOCK
======================================================*/

pre{

    background:#F4F4F4;

    border-radius:8px;

    padding:20px;

    overflow:auto;

    border:1px solid var(--border);

}

code{

    font-family:Consolas, monospace;

}

/*======================================================
RESPONSIVE (WEB VERSION)
======================================================*/

@media screen and (max-width:900px){

.summary-grid,
.grid-2,
.grid-3,
.tool-grid,
.startup-grid,
.feature-panel,
.stats,
.profit-panel,
.gallery{

grid-template-columns:1fr;

}

.page-header,
.page-footer{

flex-direction:column;

gap:10px;

text-align:center;

}

}

/*======================================================
PRINT OPTIMISATION
======================================================*/

@media print{

body{

background:white;

}

a{

text-decoration:none;

color:black;

}

.chapter-banner{

box-shadow:none;

}

.card,
.tool-card,
.summary-card,
.feature,
.stat,
.price-card{

box-shadow:none;

}

.tip-box,
.warning-box,
.success-box,
.info-box{

break-inside:avoid;

page-break-inside:avoid;

}

table{

font-size:13px;

}

}

/*======================================================
HELPER UTILITIES
======================================================*/

.w-100{width:100%;}

.w-75{width:75%;}

.w-50{width:50%;}

.w-25{width:25%;}

.text-left{text-align:left;}

.text-center{text-align:center;}

.text-right{text-align:right;}

.text-success{color:var(--success);}

.text-warning{color:var(--warning);}

.text-danger{color:var(--danger);}

.bg-primary{

background:var(--primary);

color:white;

}

.bg-light{

background:var(--light);

}

.rounded{

border-radius:10px;

}

.shadow{

box-shadow:var(--shadow);

}

.border{

border:1px solid var(--border);

}

.p-10{padding:10px;}

.p-20{padding:20px;}

.p-30{padding:30px;}

.mt-10{margin-top:10px;}

.mt-30{margin-top:30px;}

.mt-50{margin-top:50px;}

.mb-10{margin-bottom:10px;}

.mb-30{margin-bottom:30px;}

.mb-50{margin-bottom:50px;}

/*======================================================
END
======================================================*/