/* Happy planner page layouts */

:root {
    --print-guide: 1px solid gray;
    
    --binding-offset: 0.51in;
    --edge-offset: 0.15in;

    --page-width: 7in;
    --page-height: 9.25in;

    --box-width: 1.56in;
    --box-height: 1.56in;

    --col-width: var(--box-width);
}

.page-vertical {
    width: var(--page-width);
    height: var(--page-height);
    padding-top: var(--edge-offset);
    padding-bottom: var(--edge-offset);
    padding-left: calc(var(--page-width) - var(--binding-offset) - var(--col-width) * 4);
    padding-right: var(--binding-offset);
    outline: var(--print-guide);
}

.page-horizontal {
    width: 9.25in;
    height: 7in;
    padding-top: var(--edge-offset);
    padding-bottom: var(--binding-offset);
    padding-left: var(--edge-offset);
    padding-right: var(--edge-offset);
    outline: var(--print-guide);
}

.page-container {
    height: 100%;
    width: 100%;
    outline: 1px solid red;
    position: relative;
}

/* Row system */
.row {
    display: flex;
    align-items: start;
    justify-content: start;
}

.row-center {
    align-items: center;
    justify-content: center;
}

/* Happy planner boxes */

.box {
    border: 1px solid gray;
    border-collapse: collapse;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    /* Spreads children evenly vertically */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.box-wide {
    height: var(--box-height);
    width: calc(var(--box-width) * 2);
}

.box-wide + .box-wide {
    border-left: none;
}

.box-item {
    height: 30px;
}

.box-line {
    width: 100%;
    border-bottom: 1px dashed gray
}

/* Helpers */
.mb-0 {
    margin-bottom: 0px;
}

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

.mb-2 {
    margin-bottom: 20px;
}

.top-left {
    position: absolute;
    top: 10px;
    left: 10px;
}

.top-right {
    position: absolute;
    top: 10px;
    right: 10px;
}

.top-center {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%);
}