/*
 Theme Name:  Blocksy Child
 Template:    blocksy
 Description: Child theme for Blocksy customizations.
 Version:     1.0.0
*/

/* Optional: your custom CSS here. */

:root {
    --our-background-light: #b79a05;
    --our-background: #166c49;
    --highlight-yellow: #FFFF00;
    --highlight-other: #05FFFF;
    --highlight-green: #00FF00;
}
/*
 *========================
 * Overall Fonts
 *========================
 */
:lang(he-IL), .lang-he, .lang-he-il {
    font-family: 'David Libre', serif !important;
}
:lang(en-US), .lang-en, .lang-en-gb {
    font-family: 'EB Garamond', serif !important;
}
.lang-he h1, .lang-he h2, .lang-he h3, .lang-he h4 {
    font-family: 'David Libre', serif !important;
}
.lang-en h1, .lang-en h2, .lang-en h3, .lang-en h4 {
    font-family: 'EB Garamond', serif !important;
	font-size: 0.9rem !important; /* Adjust this number as needed */
}

/*
 *=========================
 * Site Title font override
 *=========================
 */
.site-title, 
.site-title a {
    font-family: "Google Sans", Helvetica, sans-serif !important;
}

/* Might be needed for sticky header */
.ct-site-text-logo {
    font-family: Arial, Helvetica, sans-serif !important;
}

/*
 * ================================
 * Hamburger menu colors
 * ================================
 */
/*
.ct-sticky-container .ct-container .ct-header-trigger .ct-icon:hover {
    box-shadow: 0 0 16px rgba(256, 256, 256, 1.0);
}
*/

.ct-header-trigger {
    position: relative;  /* needed so ::after positions relative to it */
}

.ct-header-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;   /* adjust to taste */
    height: 40px;  /* adjust to taste */
    background-color: white;
    border-radius: 50%;  /* makes it a circle — remove for a square */
    opacity: 0;
    transition: opacity 0.2s ease;  /* smooth fade in */
    z-index: -1;  /* keeps it behind the icon */
}

.ct-header-trigger:hover::after {
    opacity: 1;
}

.ct-header-trigger:hover svg {
    color: green;  /* change icon color on hover */
    fill: green;
}

/*
 * ================================
 * Fix the color of the close
 * button on the off-canvas area.
 * ================================
 */
#offcanvas .ct-toggle-close svg {
    color: #333333;  /* change to your preferred color */
    fill: #333333;
}

/*
 *========================
 * Language Switcher
 *========================
 */

.ct-language-switcher [lang="he-IL"] .ct-label {
    font-size: 20px !important;
}
.ct-language-switcher [lang="en-US"] .ct-label {
    font-size: 16px !important;
}
.ct-language-switcher .ct-label {
    padding: 0 10px;
    text-transform: none !important;
}
.ct-language-switcher .ct-label:hover,
.ct-language-switcher .ct-label:hover {
    background-color: white;
    color: green;
    padding: 0 10px;
}


/*
 *========================
 * Bilingual Logo
 *========================
 */
.custom-logo-container {
    margin-left: 8px;
    margin-right: 8px;
}
.custom-logo-container .logo-en,
.custom-logo-container .logo-he {
    display: none !important;
    width: 100%;
}
html[lang^="en"] .custom-logo-container .logo-en {
    display: block !important;
}
html[lang="he-IL"] .custom-logo-container .logo-he,
html[lang="he"] .custom-logo-container .logo-he {
    display: block !important;
}
.logo-he-text,
.logo-en-text {
    display: flex;
    flex-direction: column;
    color: white;
    align-items: center;
    justify-items: center;
    font-size: 24pt;
}

/* Ensure the image doesn't exceed a reasonable size on tablets */
@media (max-width: 600px) {
    .logo-he-text,
    .logo-en-text {
        font-size: 18pt;
    }
}

/* Updated Text: Using 'clamp' so it shrinks on tablets but stays readable */
.logo-en-text.logo2 span,
.logo-he-text.logo2 span {
    font-weight: bold;
    white-space: nowrap; /* Keeps the name on one line */
}

.logo-en-text.logo2 span {
    font-family: "Google Sans", sans-serif !important;
    font-size: 80%;
}

.logo-he-text.logo2 span {
    font-family: "Noto Sans Hebrew", sans-serif !important;
    font-size: 90%;
}

.logo-img {
    width: 128pt;
    max-width: 40%; /* Image won't take more than 40% of the logo area */
    height: auto;
    flex-shrink: 1; 
}
.logo-cont-en,
.logo-cont-he {
   margin-top: 8px;             
   display: flex;             
   flex-direction: row;
   gap: 10px;
   align-items: center;
   justify-items: center;
}

.logo-cont-he {
   direction: rtl;
}

/* Ensure the image doesn't exceed a reasonable size on tablets */
@media (max-width: 1000px) {
    .logo-img {
        width: 80pt !important; /* Forces the image smaller as soon as we hit tablet range */
    }
}

/*
 * ================================
 * Highlighting
 * ================================
 */
.marked {
    background-color: var(--highlight-other);
}

.marked.marked-yellow {
    background-color: var(--highlight-yellow);
}

.marked.marked-green {
    background-color: var(--highlight-green);
}

mark                     { padding: 0 2px; }
mark.highlight-yellow    { background-color: #ffff00; }
mark.highlight-cyan      { background-color: #00ffff; }
mark.highlight-green     { background-color: #00ff00; }
mark.highlight-magenta   { background-color: #ff00ff; }
mark.highlight-red       { background-color: #ff0000; color: #fff; }
mark.highlight-blue      { background-color: #0000ff; color: #fff; }
mark.highlight-darkblue  { background-color: #00008b; color: #fff; }
mark.highlight-darkcyan  { background-color: #008b8b; }
mark.highlight-darkgreen { background-color: #006400; color: #fff; }
mark.highlight-darkred   { background-color: #8b0000; color: #fff; }
mark.highlight-darkyellow{ background-color: #9b870c; }
mark.highlight-darkgray  { background-color: #a9a9a9; }
mark.highlight-lightgray { background-color: #d3d3d3; }
u           { text-decoration: underline; }

/*
 * ================================
 * Protocol search results size
 * ================================
 */
.ct-container .protocol-archive-list li {
    font-size: 16pt;
}