/* 
  global-typography.css
  =========================================
  Standardizes typography across all Peace University pages.
*/

/* Force Times New Roman on everything */
*, *::before, *::after {
    font-family: 'Times New Roman', Times, serif !important;
}

/* Responsive, consistent Heading Sizing */
h1 {
    font-size: 3.5rem !important; /* ~56px */
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

h2 {
    font-size: 2.5rem !important; /* ~40px */
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
}

h3 {
    font-size: 1.75rem !important; /* ~28px */
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

h4, .heading-title {
    font-size: 1.35rem !important; /* ~21px */
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

@media (max-width: 768px) {
    h1 { font-size: 2.5rem !important; }
    h2 { font-size: 2.0rem !important; }
    h3 { font-size: 1.5rem !important; }
    h4, .heading-title { font-size: 1.2rem !important; }
}

/* Global Body Text styling */
body, p, .body-text {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
}

/* Inputs, lists, tables, buttons default sizes (without overriding specific smaller font utility classes where possible) */
li, td, th, label, input, textarea, select, button {
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Clean forms spacing and styling tweaks */
input::placeholder, textarea::placeholder {
    font-family: 'Times New Roman', Times, serif !important;
    opacity: 0.8 !important;
}

/* Footer specific overrides for elegant sizing */
footer, footer p, footer li, footer a, footer span, footer label, footer div {
    font-size: 0.875rem !important; /* ~14px */
    line-height: 1.5 !important;
}

footer h1, footer h2, footer h3, footer h4, .footer-title {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.5rem !important;
    color: #fff !important;
}

/* ==========================================================================
   Header & Navigation Alignment Fixes
   ========================================================================== */

/* Fix Google Translate widget appearance, size and extra spacing */
#google_translate_element {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
}

.goog-te-gadget {
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Customize the translation dropdown select box */
.goog-te-gadget .goog-te-combo {
    background: #111 !important;
    color: #fff !important;
    border: 1px solid #B89A5A !important;
    padding: 4px 6px !important; /* Tight padding */
    border-radius: 4px !important;
    font-size: 12px !important;
    font-family: 'Times New Roman', Times, serif !important;
    cursor: pointer !important;
    max-width: 105px !important; /* Keep it compact */
    height: 28px !important;
    line-height: normal !important;
    margin: 0 !important;
    outline: none !important;
}

.goog-logo-link,
.goog-te-gadget span,
#google_translate_element a {
    display: none !important; /* Remove Powered by Google text and link */
}

/* Customize the iframe banner Google Translate adds at the top */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame {
    display: none !important;
}

body {
    top: 0 !important;
}

/* Adjust navbar alignment and spacing for a single line */
header nav.hidden.md\:flex {
    display: none !important; /* We will handle showing it with media queries below */
}

header .hidden.md\:flex.items-center.space-x-4 {
    display: none !important;
}

header button#menuBtn {
    display: block !important;
}

/* Define media query for desktop screens (>= 1120px) to show navbar in one line */
@media (min-width: 1120px) {
    header button#menuBtn {
        display: none !important;
    }
    
    header nav.hidden.md\:flex {
        display: flex !important;
        align-items: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        /* Reset spacing to prevent wrap */
        column-gap: 12px !important;
        row-gap: 0 !important;
    }
    
    /* Ensure child spacing reset */
    header nav.hidden.md\:flex > :not([hidden]) ~ :not([hidden]) {
        margin-left: 0 !important;
    }
    
    header nav.hidden.md\:flex a {
        font-size: 12px !important; /* Slightly smaller to fit in a single line */
        white-space: nowrap !important;
        letter-spacing: 0.5px !important;
        padding: 4px 2px !important;
    }
    
    header .hidden.md\:flex.items-center.space-x-4 {
        display: flex !important;
        align-items: center !important;
        column-gap: 8px !important;
    }
    
    header .hidden.md\:flex.items-center.space-x-4 > :not([hidden]) ~ :not([hidden]) {
        margin-left: 0 !important;
    }
}

/* Fix mobile menu visibility for intermediate screen sizes (768px to 1120px) */
@media (max-width: 1119px) {
    header #mobileMenu.md\:hidden {
        /* Allow the menu to be displayed if it does NOT have the 'hidden' class */
        display: block !important;
    }
    header #mobileMenu.hidden {
        display: none !important;
    }
    
    /* If the translator is inside the hidden desktop area, we still want it visible in the header! */
    header .hidden.md\:flex.items-center.space-x-4 {
        display: flex !important;
        position: absolute !important;
        right: 70px !important; /* Next to the burger menu button */
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 60 !important;
    }
    /* Hide the Apply Now button from this absolute positioned container, since it is already in the mobile menu or we only want the language select */
    header .hidden.md\:flex.items-center.space-x-4 a.border {
        display: none !important;
    }
}