/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap');
@font-face {font-family: "Virgil";src: url("https://excalidraw.com/Virgil.woff2");}
@font-face {font-family: "Cascadia";src: url("https://excalidraw.com/Cascadia.woff2");}
@font-face {font-family: "Assistant";src: url("https://excalidraw.com/Assistant-Regular.woff2");}
/**/


/* For WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
    height: 12px; /* Height of the scrollbar */
}

::-webkit-scrollbar-thumb {
    background-image: url('Images/WebArt/SwordScrollIcon.png'); /* Your image URL */
    background-size: contain; /* Scale the image to cover the thumb */
	background-repeat: no-repeat;
	background-position: center; /* Center the image */
    border-radius: 6px; /* Rounded corners for the scrollbar thumb */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background color of the scrollbar track */
    border-radius: 6px; /* Rounded corners for the scrollbar track */
}
/* Force a visible horizontal scrollbar just for the gallery */
.scroll-gallery {
  overflow-x: scroll;                 /* always show horizontal bar */
  overflow-y: hidden;
  scrollbar-gutter: stable both-edges;/* reserve space for the bar */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: auto;              /* Firefox: thicker & visible */
  scrollbar-color: #555 #ddd;         /* Firefox: thumb | track */
}

/* WebKit (Chrome/Edge/Safari) — make the bar chunky & obvious */
.scroll-gallery::-webkit-scrollbar {
  height: 14px;                       /* thicker horizontal bar */
}

.scroll-gallery::-webkit-scrollbar-track {
  background: #ddd;
  border-radius: 8px;
}

/* Give the thumb a solid colour + your sword icon centred inside */
.scroll-gallery::-webkit-scrollbar-thumb {
  background-color: #555;             /* visible regardless of image */
  background-image: url('Images/WebArt/SwordScrollIcon.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px auto;
  border-radius: 8px;

  /* Creates padding so the sword isn’t squashed */
  border: 4px solid transparent;
  background-clip: content-box;
}

.scroll-gallery::-webkit-scrollbar-thumb:hover {
  background-color: #333;
}
/* Hide lightboxes by default */
.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;                       /* top/right/bottom/left: 0 */
  background: rgba(0,0,0,0.9);
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}

/* Show when targeted */
.lightbox:target {
  display: flex;
}

/* Make the enlarged image big but contained */
.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border: 0;                      /* override your global img border */
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

/* Optional: ensure thumbnails keep your border */
.scrollbar-orange figure img {
  border: 2px solid #b5651d;
  border-radius: 8px;
}




/* Big, orange, always-visible horizontal scrollbar (overrides your globals) */
.scrollbar-orange {
  overflow-x: scroll;                 /* show the bar (not just auto) */
  overflow-y: hidden;
  scrollbar-gutter: stable both-edges;

  /* Firefox */
  scrollbar-width: auto;              /* thicker */
  scrollbar-color: #ff8c00 #2b2b2b;   /* thumb | track */
}

/* Chrome / Edge / Safari */
.scrollbar-orange::-webkit-scrollbar {
  height: 16px;                       /* thicker horizontal bar */
}
.scrollbar-orange::-webkit-scrollbar-track {
  background: #2b2b2b;                /* dark track so orange pops */
  border-radius: 8px;
}
.scrollbar-orange::-webkit-scrollbar-thumb {
  background-color: #ff8c00;          /* visible orange thumb */
  background-image: none !important;  /* override your sword image */
  border-radius: 8px;
  border: 3px solid #2b2b2b;          /* creates a nice “pill” */
}
.scrollbar-orange::-webkit-scrollbar-thumb:hover {
  background-color: #ff7a00;
}


.distance-tooltip {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px;
  border-radius: 5px;
  display: none; // Initially hidden
}

.published-container.is-readable-line-width .site-body-left-column {
    flex-basis: calc((100vw - var(--page-width)) / 2);
}

.site-body-left-column, .site-body-right-column {
    font-size: var(--sidebar-font-size);
    min-height: 0;
}
.site-body-left-column {
    width: var(--sidebar-left-width);
    flex: 0 0 var(--sidebar-left-width);
    min-width: var(--sidebar-left-width);
    padding: 32px 0 0 18px;
    position: relative;
    display: flex;
    background-color: var(--sidebar-left-background);
	background-image: url('Images/WebArt/BlackLeather.jpg'); /* Replace with your image URL */
    background-size: cover;  /* Scales the image to cover the whole area */
    background-repeat: no-repeat;
    border-right: var(--sidebar-left-border-width) solid var(--sidebar-left-border-color);
    height: 100%;
}


div.site-footer {
	display: none;
}

div.excalidraw-svg {
	/*width: fit-content;*/
	height: 100%>
}

svg.excalidraw-svg {
	max-width:100%;
	max-height: 90vh;
	width: var(--page-width);
}

svg.excalidraw-svg.ex-pageheight {
	width: initial;
	height: 100%;
}

svg.excalidraw-svg.ex-pagewidth {
	width: 90vw;
	height: initial;
}

.excalidraw-svg .text {
  width: 100%;
  text-align: center;
}

div.excalidraw-svg.enlarged {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* General page styling g*/
body {
    background-color: #f4f0e6; /* Light parchment-like color */
    background-image: url('Images/WebArt/parchment-texture.jpg'); /* Add your parchment background image */
    background-size: cover;
    font-family: 'Cinzel', serif; /* Fantasy style serif font */
    color: #2e2b2b; /* Dark text color for readability */
    margin: 0;
	/*margin-left: 300px; /* Adjust margin to match the left column width */
    padding: 0;
	overflow: auto;
    line-height: 1.6;
    /*cursor: url('MouseIcon.png'), auto; /* Custom cursor */
}

/* Add some page padding */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.85); /* Transparent white background for text */
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

/* Header styling */
header {
    text-align: center;
    padding: 2px;
    background-color: #8b4513; /* Dark wood-like color */ 
    color: #fff;
    border-bottom: 5px solid #b5651d; /* Golden highlight */
    font-family: 'Uncial Antiqua', cursive; /* Old-school medieval font */
    font-size: 2.5rem;
    letter-spacing: 3px;
    text-shadow: 2px 2px 4px #000;
}


/* Page Header styling */
.page-header {
    background-image: url('Images/WebArt/Banner.png'); /* Parchment background image */
    background-position: center;  /* Center the image */
    background-size: cover;     /* Scale the image while maintaining aspect ratio */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    width: 105% ;                  /* Full width of the parent container */
    height: 27.3vh !important;                /* Set height as needed */
    display: flex !important;
    justify-content: center !important;      /* Horizontally center the text */
    align-items: center !important;          /* Vertically center the text */
    text-align: center !important;
    padding: 20px !important;
    color: #000000 !important; /* Ensure black text */
    font-family: 'Cinzel', serif; /* Main serif font */
    font-size: 1.5rem !important;
    letter-spacing: 3px !important;
    text-shadow: 0px 1px 2px #000;

} 


/* Navigation styling */
nav {
    text-align: center;
    margin-bottom: 20px;
}

nav a {
    color: #fff;
    background-color: #5c2d1a;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

nav a:hover {
    background-color: #b5651d; /* Golden hover effect */
}

/* Section headings */
h2 .markdown-rendered h2{
    font-family: 'Cinzel Decorative', cursive !important; /* Fancy, themed font for headings */
    font-size: 2rem;
    color: #2e2b2b; /* Dark brown text for contrast */
    border-bottom: 2px solid #b5651d;
    padding-bottom: 10px;
    margin-top: 40px;
}

h3, .markdown-rendered h3 {
    font-size: 1.5rem;
    color: #b5651d;
}

h4, .markdown-rendered h4 {
    font-size: 1.2rem;
    color: #b5651d;
}

h5, .markdown-rendered h5 {
    font-size: 1.0rem;
    color: #b5651d;
}
h6, .markdown-rendered h6 {
    font-size: 0.9rem;
    color: #b5651d;
}

/* Text styling */
p, li {
   /* font-family: 'Cinzel Decorative', serif; /* Use a readable, slightly ornate serif font for body text */
    color: #2e2b2b; /* Dark brown text for contrast */
    font-size: 1.1rem;
    margin-bottom: 15px;
}

/* Image styling */
img {
    max-width: 100%;
    height: auto;
    border: 2px solid #b5651d; /* Golden borders for images */
    border-radius: 8px;
    margin: 20px 0;
}

/* Table styling */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: #8b4513;
}

th, td {
    padding: 12px;
    border: 2px solid #b5651d; /* Golden borders for table cells */
    text-align: left;
    font-family: 'Cinzel', serif;
}

th {
    background-color: #8b4513;
    color: #000000;
    font-size: 1.2rem;
}

td {
    background-color: #8b4513;
    font-size: 1rem;
}

/* Footer styling */
footer {
    text-align: center;
    padding: 20px;
    background-color: #8b4513;
    color: #fff;
    font-family: 'Cinzel', serif;
    border-top: 5px solid #b5651d;
}

/* Button styling */
button {
    background-color: #b5651d;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #8b4513;
}


/* Global Custom Mouse Cursor */
body {
    cursor: url('Images/WebArt/MouseIcon.png'), auto;
}

/* Hover Effects for Links and Buttons */
a:hover, button:hover {
    cursor: url('Images/WebArt/HandIcon.png') 1 1, pointer; /* Adjusted hotspot values */
    color: #0000ba; /* Optional: Add hover color */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
}

/* Safely Apply Cursor to Dropdowns */
select {
    cursor: pointer; /* Use native pointer for dropdowns */
}

option {
    cursor: default; /* Default cursor for options */
}

/* Mobile Styles */
@media (max-width: 768px) {
    /* Adjust body padding and font size for better readability */
    body {
        font-size: 17px; /* Slightly larger text for readability */
        line-height: 1.2; /* More space between lines */
        overflow-x: hidden; /* Prevent horizontal scrolling issues */
        padding: 10px; /* Consistent padding for better spacing */
    }

    /* Responsive container */
    .container {
        padding: 12px; /* Slightly increased padding for spacing */
    }

    /* Navigation Tweaks */
    nav {
        display: flex;
        flex-direction: column; /* Stack navigation links */
        align-items: center;
        text-align: center;
    }

    nav a {
        padding: 8px 15px; /* Larger tap area for links */
        font-size: 1rem; /* More readable font */
        display: block;
        margin-bottom: 5px;
        border-radius: 5px; /* Rounded edges for better design */
    }

    /* Header */
    .page-header {
        height: 18vh; /* Reduce banner height slightly */
        font-size: 1.4rem;
        padding: 10px;
        text-align: center;
    }

    /* Section Headings */
    h2 {
        font-size: 1.6rem;
    }

    h3, .markdown-rendered h3 {
        font-size: 1.4rem;
    }

    h4, .markdown-rendered h4 {
        font-size: 1.2rem;
    }

    /* Buttons */
    button {
        font-size: 1rem;
        padding: 10px 12px; /* Slightly larger for touch-friendliness */
        border-radius: 6px; /* Rounded edges for modern look */
    }

    /* Improve Tapability for Interactive Elements */
    a, button {
        padding: 8px 16px;
        display: inline-block;
    }

    /* Ensure Images Fit Well */
    img {
        max-width: 100%;
        height: auto;
        border-radius: 6px; /* Slightly rounded for better aesthetics */
    }

    /* Fix Tables */
    table {
        width: 100%;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Code Blocks Scroll Correctly */
    pre {
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow-x: auto;
        background: #f4f4f4;
        padding: 8px;
        border-radius: 6px;
    }

    /* Footer */
    footer {
        font-size: 1rem;
        padding: 12px;
        text-align: center;
        background: rgba(0, 0, 0, 0.05);
        border-top: 2px solid rgba(0, 0, 0, 0.1);
    }
}


/* Very Small Mobile Screens (e.g., phones in portrait mode) */
@media (max-width: 480px) {
    /* Further reduce padding for very small screens */
    .container {
        padding: 5px;
    }

    nav a {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    .page-header {
        height: 18vh; /* Even smaller banner */
    }

    h2 {
        font-size: 1.3rem;
    }

    button {
        font-size: 0.8rem;
        padding: 6px 8px;
    }
}

/* Allow horizontal scrolling for large Excel embeds */
.excel-container {
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
}


/* Make tables fully responsive */
table {
    width: 100% !important; /* Force tables to use full width */
    max-width: 100%; /* Prevents them from overflowing */
    border-collapse: collapse; /* Makes borders look cleaner */
}

/* Ensure table cells don't shrink too much */
th, td {
    word-wrap: break-word;
    white-space: normal; /* Allow text to wrap */
    padding: 8px; /* Improve spacing */
    text-align: left; /* Keep text aligned properly */
    font-size: 16px; /* Improve readability */
}

/* Optional: Improve mobile spacing */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto; /* Keeps tables flexible */
        border-spacing: 0;
    }
    
    th, td {
        font-size: 14px; /* Slightly smaller text for better fit */
    }
}