/*
 Theme Name:   Nine Trades of Dundee Archive
 Description:  Custom theme
 Author:       Carnoustie Creative
 Author URI:   https://www.carnoustiecreative.co.uk
 Template:     baseline
 Version:      1.2.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  baseline-child

font-family: myriad-pro,sans-serif;
font-weight: 400;
font-style: normal;

font-family: myriad-pro,sans-serif;
font-weight: 600;
font-style: normal;

font-family: plantin,sans-serif;
font-weight: 600;
font-style: normal;


*/

:root {
    --nt-blue: #007FC4;
    --nt-red: #DF0124;
    --nt-yellow: #F5DF00;
    --nt-gold: #D4AF37;
    --nt-dark-red: #8B0217;
    --nt-dark-blue: #024C74;
    --nt-light-grey: #f1f1f1;
    --nt-breakpoint: 720px;
}

.baseline {
    --baseline-aos-distance: 100px;
    --baseline-aos-distance-negative: -100px;
}

body.baseline {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    font-family: myriad-pro,sans-serif;
    font-size: clamp(1.5rem, 2vw, 1.8rem);
}

.baseline .main .content {
    background-color: transparent;
}

.search-results .content {
    margin-top: 4rem;
}

.baseline .header-wrap {
    background-image: url('concrete-texture.jpg');
    background-repeat: repeat;
    box-shadow: 0rem 0.3rem 1rem 0.1rem rgba(0, 0, 0, 0.3);
}

.baseline h1 {
    font-family: plantin,sans-serif;
    font-weight: 600;
    font-style: normal;    
    font-size: clamp(4rem, 3.5vw, 6.5rem);
}

.header-wrap i {
    color: var(--nt-blue);
    margin-right: 0.3rem;
}

.header-wrap .container,
#footer-bottom-container.container {
    max-width: 96%;
    width: 96%;
}

.baseline header .custom-logo {
    width: 30rem !important;
}

@media ( min-width: 720px ) {

    .header-wrap .logo {
        position: absolute;
        top: 2rem;
    }

    .baseline header .logo .custom-logo {
        width: 24rem !important;     
    }

    .baseline header,
    .baseline header .container {
        height: 100%;
    }

    .baseline .header-wrap {
        height: 16rem;
    }

    header .first {
        top: 2rem;
    }

    header .second {
        padding-top: 1.8rem;
        border-top: 0.3rem groove rgba(255, 255, 255, 0.15);
    }

}

footer .menu li {    
    text-transform: uppercase;
    font-size: 1.3rem;
    letter-spacing: 0.2rem;
}

footer {
    padding: 5rem 0;
}

.baseline footer .widget-area .menu li:after {
    margin: 0 1.7rem;
    opacity: 0.3;
}

.header-wrap .first .menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
} 

.header-wrap .first .menu li a {
    padding: 1.2rem 1.5rem;
    border-radius: 0.3rem;
    display: inline-block;
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    text-align: center;
}

.header-wrap .first .menu li.current-menu-item a,
.single-doc-part .first .menu .browse-archive a {
    background-color: #fff;
}

.limit-width .inner {
    max-width: 80rem;
    margin: 0 auto;
}

.baseline footer {
    margin-top: 5rem;
}

.baseline.single-doc-part footer {
    margin-top: 0;
}

/* Collapsible */

.baseline .cde-toggle-label {
    position: relative;
    padding: 2.5rem;
    padding-right: 8rem;
    border: 0.3rem solid var(--nt-dark-blue);
    border-radius: 0.5rem;
    background-color: #97572b;
    background-image: url('leather-texture.jpg');
    background-size: 40%;        
    color: #fff;    
    background-blend-mode: multiply;  
    font-family: plantin,sans-serif;
    font-size: 2.6rem;  
    font-weight: 600;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.baseline .cde-toggle-label .button {
    margin-left: auto;
    margin-right: 3rem;
    margin-bottom: 0;
    border: 0.1rem solid rgba(0, 0, 0, 0.6);
    background-color: rgba(0, 0, 0, 0.2);
    font-family: myriad-pro,sans-serif;
}

.baseline .cde-toggle-label .button:hover {
    border-color: var(255, 255, 255, 0.4);
}

.baseline .cde-toggle-label .button i {
    margin-right: 0.8rem;
    color: var(--nt-blue);
}

.cde-toggle-label:hover {
    border-color: var(--nt-blue);
}

.baseline input.cde-toggle:checked + .cde-toggle-label:before {
    content: "\f078";    
    top: 50%;    
    transform: translate(-50%, -50%)  rotate(180deg);
    right: 0.5rem;
}

.baseline .cde-toggle-label:before {
    content: "\f078";
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: "Font Awesome 6 Pro";
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; /* Hide original text color */
    text-fill-color: transparent;
    position: absolute;
    right: 3rem;
    transition-duration: 0.3s;
    background-color: transparent;
    font-size: 3rem;
    line-height: 1.4;
    width: 3rem;
    height: 3rem;
    position: absolute;
    top: 50%;    
    transform: translate(-50%, -50%);
    right: 0.5rem;
}

@media ( max-width: 600px ) {

    .baseline .cde-toggle-label {
        font-size: 1.7rem;
        line-height: 1.4;
        padding: 2rem;
        padding-right: 8rem;
    }    

}

/* End of collapsible */

ul.books,
ul.docparts {
    list-style: none;
}

.books .cde-toggle-label {
    margin-bottom: 3rem;
}

ul.docparts li.docpart a,
ul.docparts li.docpart-header,
article .doc-part_info {
    display: grid;
    grid-template-columns: 10rem 1fr 8rem;
    grid-column-gap: 4rem;
    padding: 0.8rem;
}

ul.docparts li.docpart-header {
    margin-top: -2rem;
    font-size: 1.4rem;
    text-transform: uppercase;
    color: rgba(0,0,0,0.4);
    padding-bottom: 0;
}

ul.docparts li.docpart a {    
    border-top: 0.1rem solid rgba(0,0,0,0.2);    
    text-decoration: none;
}

ul.docparts li {
    margin-left: 4rem;
}

/* -- Doc part viewer -- */

.docpart-container {
    display: flex;
    width: 100vw;
    height: 100vh;
}

/* Left panel with the image */
.left-panel {
    width: 50%; /* initial width */
    position: relative;
    border-right: 1px solid #ccc;
    overflow: hidden;
    /* For smooth panning on mobile, disable default touch scrolling: */
    touch-action: none;
}

/* Divider for resizing */
.divider {
    width: 8px;
    cursor: col-resize;
    background-color: #ddd;
    position: relative;
    /* Add visual indicator for touch devices */
    display: flex;
    align-items: center;
    justify-content: center;
}

.divider_dots {
    width: 8px;
    display: block;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.divider_dots .dot {
    opacity: 0.5;
    display: inline-block;
    line-height: 0.5rem;
    font-size: 3rem;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
}
 

/* Make divider more touch-friendly on touch devices */
@media (hover: none) {
    .divider {
        width: 30px;
        background-color: #e5e5e5;
    }
    
    /* Add a visual drag handle */
    .divider::after {
        content: "⋮";
        color: #666;
        font-size: 24px;
        line-height: 1;
        transform: rotate(90deg);
    }
    
    /* Add subtle highlight effect on touch */
    .divider.dragging {
        background-color: #d5d5d5;
    }
}

/* Right panel */
.right-panel {
    flex: 1;
    overflow: auto;
    padding: 3rem;
    background-color: #fff;
}

/* Container for image and controls */
#image-container {
    width: 100%;
    height: 100%;
    position: relative;
    cursor: grab;
    /* This is important for touch panning: */
    touch-action: none;
}

#image-container:active {
    cursor: grabbing;
}

/* Buttons and slider at top-left corner of the image container */
#controls {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 5px;
    border-radius: 4px;
    backdrop-filter: blur(10px);
}

/* The image itself */
#doc-image {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0; /* top-left makes zoom math simpler */
    max-width: none; /* allow scaling beyond natural size */
}

.docpart-container .left-panel {
    background-color: #333;
}

.single-doc-part button {
    margin-bottom: 0;
    padding-left: 1.6rem;
}

.single-doc-part .right-panel h3 {
    margin-top: 0;
    color: var(--nt-blue)
}

.single-doc-part button i {
    color:rgba(255, 255, 255, 0.5);
    margin-right: 0.4rem;
}

.single-doc-part .main .content {
    display: none;
}

.single-doc-part .context-bar {
    background-color: var(--nt-dark-blue);
    padding: 5rem 4rem 3rem 4rem;
    display: grid;
    grid-template-columns: 1fr 15rem;
    grid-column-gap: 4rem;
}

.book_pagecount {
    opacity: 0.6;
}

.context-bar .book_name {
    color: #fff;
    font-family: plantin,sans-serif;
    font-size: 2.7rem;
}

.context-bar .book_pages {
    color: #fff;
    font-size: 3rem;
    position: relative;
    text-align: center;
}

.context-bar .book_pages:before {
    content: "Page";
    position: absolute;
    top: -2rem;
    left: 0;
    text-align: center;
    opacity: 0.6;
    width: 100%;
    font-size: 1.4rem;
    text-transform: uppercase;
}

.context-bar .book_pages i {
    color: var(--nt-blue);
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; /* Hide original text color */
    text-fill-color: transparent;
}

#mainContainer {
    position: relative;
    width: 100%;
    height: 100%;
}

.metadata-bar {
    background-color: var(--nt-light-grey);
    padding: 4rem;
    display: grid;
    grid-template-columns: 15rem 1fr 1fr 1fr 1fr;
    grid-column-gap: 4rem;
}

.metadata_label {
    font-size: 1.4rem;
    text-transform: uppercase;
}

.metadata-bar h4 {
    margin-top: 0;
}

.metadata_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.metadata-bar .button i {
    color: var(--nt-yellow);
    margin-right: 0.5rem;
}   

/* -- End of doc part viewer -- */

article.doc-part a {
    border-radius: 0.5rem;
    padding: 2.5rem;
    display: block;
    border: 0.1rem solid var(--nt-blue);
    text-decoration: none;
}

.doc-part_book {
    margin-bottom: 1rem;
    font-weight: bold;
}

article .doc-part_info {
    padding: 0;
}

.doc-part_info span {
    display: block;
    font-size: 1.4rem;
    text-transform: uppercase;
}

.flex-elm.has-bgcolor {
    border-radius: 0.5rem;
}

.home h1 {
    position: relative;
}

/* 
.home h1:before {
    position: absolute;
    top: -4rem;
    content: "";
    height: 0.8rem;
    width: 100%;
    display: block;
    background-color: var(--nt-blue);
}
*/

.home .left-col {
    overflow: visible;
}

.home h1:before {
    position: absolute;
    left: -4rem;
    content: "";
    width: 0.8rem;
    height: 100%;
    display: block;
    background-color: var(--nt-blue);
    z-index: 3;
}

.book_pages a[href=""] {
    opacity: 0.5;
    pointer-events: none;
}

.page-template-page-filpbook .df-bg,
.page-template-page-filpbook .widget.cde-flex-content {
    background-color: #333 !important;
}

.page-template-page-filpbook footer {
    margin-top: 0;
}

ul.books li:first-child .flip-book-button {
    display: none;
}

.tscribe-menu {
    padding: 4rem 2vw;
    background-color: var(--nt-dark-red);
    color: #fff; 
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.tscribe-menu ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
}

.tscribe-menu li {
    margin-bottom: 0;
    margin-left: 4vw;
}

.tscribe-menu li a {
    color: #fff;    
}

.tscribe-menu .fa-regular {
    color: var(--nt-gold);
    margin-right: 0.7rem;
}

.tscribe_welcome {
    opacity: 0.6;
}

#transcriber-controls {
    margin-bottom: 1rem;
}

.page-template-page-filpbook .after-content-full {
    margin-top: -3rem;
}

.my-doc-list {
    margin-top: 2rem;
}

.doc-parts-list {
    list-style: none;
    margin-left: 0;
}

.doc-part-item a {
    background-color: #fff;
    display: grid;
    grid-template-columns: 15rem 1fr;
    grid-column-gap: 1.5rem;
    text-decoration: none;
    box-shadow: 0.3rem 0.3rem 0.5rem 0.4rem rgba(0,0,0,0.1);
}

.doc-part-item strong {
    display: block;
    font-size: 1.3rem;
    text-transform: uppercase;
}

.doc-list-msg {
    margin-bottom: 4rem;
}

.doc-part-notes {
    padding: 1.5rem;
    background-color: #FFFCD5;
    border: 0.1rem solid #F9EED6;
}

.doc-part-item_right {
    padding: 2rem; 
    display: flex;
    flex-direction: row;    
    flex-wrap: wrap;
}

.doc-part-title {
    flex-basis: 100%;
    width: 100%;
    font-size: 2rem;
    height: auto;
}

.doc-part-book {
    flex-basis: 30rem;
    width: 30rem;
}

.doc-part-page {
    flex-basis: 10rem;
    width: 10rem;
}

.doc-part-trade {
    flex-basis: 25rem;
    width: 25rem;
}

.doc-part-image img {
    display: block;
}

.doc-part-notes {
    flex-basis: 100%;
    width: 100%;
}

.doc-part-item_right div {
    margin-right: 2rem;
    margin-bottom: 1rem;
}

.doc-part-item_right div.doc-part-notes {
    margin-right: 0;
    margin-bottom: 1rem;
}