.invisible {visibility:hidden !important}

html {
    overflow-y: scroll;
}

body {
    margin: 0;
    font-family: "Noto Sans Hebrew", "Noto Sans", "Noto Sans JP", sans-serif; 
    background-color: #fff;
    color: #333;

    line-height: 1.375;
}

a {
    /* Transition for smooth hovering (wherever theres actually hover-definitions) */
    transition: all 0.2s ease-in-out;
    text-decoration: none; 
}

/* Navigation Bar Styling */
/* For the logo itself use an image (Modak font - chefs kiss) */
nav {
    background-color: #eee;
    padding-top: 0;
    padding-right: 11%;
    padding-left: 13%;

    position: sticky;
    top: 0;
    margin: 0;
    
    /* Change 1: Enable Flexbox */
    display: flex; 
    /* Change 2: Push children to opposite ends */
    justify-content: space-between; 
    /* Change 3: Center them vertically */
    align-items: center;

    /* box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); */
    box-shadow: 0px -10px 20px 10px rgba(0,0,0,0.15);
    border-bottom: 1px solid #ccc;
    z-index: 1000; /* Recommended: ensures navbar stays above content */
}

.navbar-logo {
    /* 
        INNER #af2be5
        OUTER #6c35bc
    */
    background-image: url("/images/pink180.png");
    display: inline-block; /* Add this to allow the width/height to take effect */
    height: 6rem;
    width: 21rem;
    margin-top: -0.25rem;
    margin-bottom: 0.25rem;
    /*margin: 0.5rem 1.25rem;*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* vertical-align: middle; Keeps it aligned with your Hebrew text links 
    NEEDED WHEN ITS JUST 2 INLINE TAGS ONE AFTER THE OTHER, BUT NOT WHEN ITS INSIDE OF A align-items: center; FLEXBOX*/
}

navbar-list {
    display: inline-flex;
    /* justify-content: flex-start;  dont think i need it */
    /* align-items: flex-end;  really?? */
    font-size: 0.875rem;

    flex-wrap: nowrap; 
    gap: 0.5rem;
}

navbar-list a {
    /* margin-top: 0.5rem; ACTUALLY NAH */
    padding: 8px 10px;
    color: white;
    background-color: #f1a;

    border-radius: 6px;
    border: 1px solid #a39;

    display: inline-flex;      
    align-items: center;   
    justify-content: center;

    /* box-shadow: -1px -2px 0px 0px rgba(0,0,0,0.5) inset;
     which is #7F0055 */
    box-shadow: -1px -2px 0px 0px rgba(0,64,64,0.5) inset;
}

navbar-list a:hover {
    background-color: #f3b; /* maybay #ff33b8*/

    box-shadow: -1px -2px 0px 0px rgba(0,0,0,0.3) inset;
}

main {
    /*
    padding-top: 10px;
    padding-right: 10%;
    padding-left: 10%;
    */
    padding: 0.625rem 10%; /* it's (0.5+0.125)rem = 8px + 2px = 10px*/
}
/* to understand what margin means:
main{
    margin: 20px;
    background-color: red;
}
*/

/* Base subject-character-grid layout */
subject-character-grid { 
    display: inline-flex; 
    flex-wrap: wrap;
    gap: 0.5rem; /* default is dense */
}
all-kr-page subject-character-grid {
    gap: 15px; 
}

/* Base styling for all links within a subject-character-grid */
.subject-character { 
    display: inline-flex;       /* כשזה פלקס רגיל אז זה פאקינג יורד שורה אחרי כל אחד. */
    align-items: center;    /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    
    /* FOR PERSON RADICAL AND ANY SIMILAR: */
    height: 50px;            
    min-width: 50px;         /* Ensures it's at least a square */
    width: auto;             /* Allows it to grow with content */
    /* padding: 0 max(0, width-height); Optional: adds breathing room on the sides when it expands. IF IT WORKED. */
    
    /* in content-box, the width specified is always the content INSIDE the padding+borders, thats why adding any padding will make the square chars not square.
    whereas in box-sizing: border-box, the width specified includes padding+borders, that why adding padding wont do nun in case of the person radical... 
    
    WAIT NO IT DOES WORK lololol*/
    box-sizing: border-box;
    padding: 0 0.5rem 1px;

    /*margin: 0 1px;*/

    font-size: 1.5rem; 
    font-weight: normal;
}

.subject-character.kanji {
    color: white;
    background-color: #f09; 
    border: 1px solid #a07;

    border-radius: 10px;
}
.subject-character.radical {
    color: #d0a; /* #f5b */
    background-color: #FFd0ee; /*#FF8DBC    #FFbbee*/
    border: 1px solid #FFd0ee;
    
    /*
    color: #e0a;
    background-color: #FFaae0;
    border: 1px solid #FFaae0;
    */

    border-radius: 14px;
}

.same-on, phonetic-component {
    display: inline-block;
    padding: 4px 8px;
    font-weight: bold;
    margin: 0px 1px;
    vertical-align: middle;
    font-size: 0.875rem;
}

/* Solid Purple Box - Analogous to your Kanji style */
.same-on {
    color: #ffffff;
    /*
    background-color: #AF2BE5;
    border: 1px solid #6C35BC;
    */
    background-color: #BB00DD; /* #AF11DD #AA11CC*/
    border: 1px solid #609; /* #7735BC */
    

    border-radius: 6px;
}

/* Light Purple Background - Analogous to your Radical style */
phonetic-component {
    color: #AF2BE5; /* Dark Purple Text */
    background-color: #EEBBFF;  /* BEST Purple #DD88FF, also #EEAAFF pretty good */
    border: 1px solid #EEBBFF;

    border-radius: 8px;
}

kr-page {
    display: block;
    padding-top: 1.5rem;
}

kr-page header {
    display: flex;
    /* height: fit-content; width: fit-content; i think its by default */
    justify-content: flex-start;
    align-items: flex-end;

    gap: 0.75rem;
}

kr-page header h1 {
    font-weight: normal;
    margin: 3px 0; /* margin: 0.25rem 0; */
}

article-page {
    display: block;
    padding-top: 1rem;
}

article-page header h1 {
    margin: 0;
    line-height: 1.25;
}
/* to make it look like the main page, we do need a margin below the bottomline.. so in this case the margin is acc in the header */

article-page header {
    display: flex;
    justify-content: space-between;
    align-items: center; 
}

article-content {
    display: block;
    margin-top: 1.25rem;
    margin-bottom: 2rem;
}

arrow-flexbox {    
    /* Change 1: Enable Flexbox */
    display: flex; /* which is NOT inline because its not inline-flex */
    /* Change 2: Push children to opposite ends */
    justify-content: left; 
    /* Change 3: Center them vertically */
    align-items: center;

    margin-left: -0.25rem; /* Nudges the left arrow to the absolute line-end */
    margin-right: -0.25rem; /* js to be symmetrical */
}

.nav-arrow {
    display: inline-block;
    width: 2.25rem;
    height: 2.25rem;
    background-color: #e5e5e5; 
    /*
    width: 2.5rem;
    height: 2.5rem;
    background-color: #e9e9e9; 
    */

    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.nav-arrow:hover {
    background-color: #bbb; 
}

/* Right Arrow Icon (Tight Chevron) */
.right-arrow {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>');
}

/* Left Arrow Icon (Tight Chevron) */
.left-arrow {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>');
}

/* use section elements just for top-and-bottom padding*/
section { 
    margin: 1.5rem 0;
}

.bottomline { 
    border-bottom: 1px solid #ccc; 
    padding-bottom: 0.5rem; 
}
hr {
    border: none;
    border-top: 1px solid #ccc; 
    height: 0;
}

readings-grid {
    padding: 0;
    margin-top: 1rem;
    margin-bottom: 0;

    /* Grid, not flexbox */
    display: grid; 
    width: 80%; /* the container itself is RTL so these 80% are on the right */
    /* Create two equal columns */
    grid-template-columns: 1.1fr 0.9fr; 
    
    /* Keep the text centered within the page, but aligned within the columns */
    text-align: left;
}

underline-text {
    text-decoration: underline;
}

flexbox-center {    
    /* Change 1: Enable Flexbox */
    display: flex; /* which is NOT inline because its not inline-flex */
    /* Change 2: Push children to opposite ends */
    justify-content: center; 
    /* Change 3: Center them vertically */
    align-items: center;
}

img-half {
    background-image: url("/images/half.png");
    display: inline-block; /* Add this to allow the width/height to take effect */
    height: 350px;
    width: 315px;
    margin: 1rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* vertical-align: middle;  Keeps it aligned with your Hebrew text links */
}

img-king {
    background-image: url("/images/king.png");
    display: inline-block; /* Add this to allow the width/height to take effect */
    height: 295px;
    width: 125px;
    margin: 1rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* vertical-align: middle;  Keeps it aligned with your Hebrew text links */
}

img-zarim-meazbenim {
    background-image: url("/images/zarim-meazbenim.jpg");
    display: inline-block; /* Add this to allow the width/height to take effect */
    height: 476px;
    width: 346px;
    margin-top: 2rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* vertical-align: middle;  Keeps it aligned with your Hebrew text links */
}


/*
וגם לזכורררר לשנות את האייקון לאלמנט לא מחלקה
*/
/* Email Container */
email-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background-color: #f5f5f5;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-family: monospace;
    width: fit-content;

    font-size: 1.125rem;
}

/* Copy Icon using Mask (Standard "Two Sheets of Paper" icon) */
/* The Icon itself as the button */
copy-icon-btn {
    margin-left: -2px; /* Nudges the left arrow to the absolute line-end */
    margin-right: -2px; /* js to be symmetrical */
    width: 22px;
    height: 22px;
    background-color: #333; /* Your accent color */
    cursor: pointer;  /* DOESNT HAPPEN AUTOMATICALLY BECAUSE ITS NOT AN <a> TAG */
    
    /* Mask logic */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-repeat: no-repeat;

    transition: background-color 0.6s ease;
}


copy-icon-btn:active {
    background-color: #f3b;
    transition: background-color 0.1s;
}

/*
home-page h2 {
    margin-bottom: 0;
}
*/
/*
meanings {
    font-size: 0.875rem;

    padding: 4px 5px;
    border: 2px solid #f09;

    border-radius: 4px;

    display: inline-flex;      
    align-items: center;   
    justify-content: center;
}
*/

.articles-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 20px;
}

.article-card {
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-color: #ccc;
}

.article-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.article-title {
    margin: 0 0 12px 0;
    font-size: 1.4rem;
    color: #333;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 8px;
}

article-snippet {
    color: #666;
    flex-grow: 1;
    margin-bottom: 15px;
}

article-snippet p {
    color: inherit;
}

.read-more {
    font-weight: bold;
    color: #007aff; /* Or your site's accent color */
    font-size: 0.9rem;
}