/* ===========================================
   Tess Baybayin Font Family
   For Baybayin Unicode only (U+1700–U+171F)
   =========================================== */

@font-face {
    font-family: 'Tess';
    src: url('fonts/Tess_Manipis.ttf') format('truetype');
    font-weight: 300; /* Light */
    font-style: normal;
    unicode-range: U+1700-171F;
}

@font-face {
    font-family: 'Tess';
    src: url('fonts/Tess_Katamtaman.ttf') format('truetype');
    font-weight: 500; /* Medium */
    font-style: normal;
    unicode-range: U+1700-171F;
}

@font-face {
    font-family: 'Tess';
    src: url('fonts/Tess_Karaniwan.ttf') format('truetype');
    font-weight: 400; /* Regular */
    font-style: normal;
    unicode-range: U+1700-171F;
}

@font-face {
    font-family: 'Tess';
    src: url('fonts/Tess_Bahagyang_Makapal.ttf') format('truetype');
    font-weight: 600; /* Semi-Bold */
    font-style: normal;
    unicode-range: U+1700-171F;
}

@font-face {
    font-family: 'Tess';
    src: url('fonts/Tess_Makapal.ttf') format('truetype');
    font-weight: 700; /* Bold */
    font-style: normal;
    unicode-range: U+1700-171F;
}

@font-face {
    font-family: 'Tess';
    src: url('fonts/Tess_Matindi.ttf') format('truetype');
    font-weight: 800; /* Extra-Bold / Heavy */
    font-style: normal;
    unicode-range: U+1700-171F;
}

/* ===========================================
   Baybayin text styling helper
   =========================================== */

.baybayin {
    font-family: 'Tess', 'Noto Sans Baybayin', sans-serif;
    font-weight: 400;
    line-height: 1.4;
}

a {
    text-decoration: none;
    color: darkgreen;
}

/*
    index.html / "unahan"
*/
body#index {
    max-width: 400px;
    margin: 0 auto;
    text-align: justify;
}

body#index h2 {
    position: relative;
    cursor: pointer;
    display: inline-block;
    border-bottom: 3px dotted #555; /* faint dotted underline */
    color: #222;
    line-height: 1.5;
    text-align: center;
}

body#index h2::before {
    content: '';
    position: absolute;
    bottom: 100%; /* start above text */
    left: 50%;
    transform: translateX(-50%) translateY(0); /* keep arrow at text-top level */
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0,0,0,0.8) transparent transparent transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

body#index h2::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%; /* start above text */
    left: 50%;
    transform: translateX(-50%) translateY(-10px); /* move tooltip above arrow */
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    padding: 5px 8px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

body#index h2:hover::after, body#index h2:hover::before {
    opacity: 1;
}

body#index h2:hover::after {
    transform: translateX(-50%) translateY(-15px);
}

body#index .menu {
    text-align: center;
}

body#index #container {
    text-align: center;
}

#container h1,
#container h2,
#container h4 {
    margin: 0.5em 0;  /* top & bottom margin, adjust as needed */
    padding: 0;       /* remove any extra padding */
    line-height: 1.3; /* slightly tighter than default */
}