/* Windoha shared stylesheet */

@font-face { font-family: 'Montserrat'; src: url('fonts/montserrat-v31-latin-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/montserrat-v31-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/montserrat-v31-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/montserrat-v31-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Serif'; src: url('fonts/noto-serif-v33-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }

@keyframes wh-fade-up    { from { opacity: 0; transform: translateY(10px);   } to { opacity: 1; transform: translateY(0); } }
@keyframes wh-fade-down  { from { opacity: 0; transform: translateY(-10px);  } to { opacity: 1; transform: translateY(0); } }
@keyframes wh-fade-right { from { opacity: 0; transform: translateX(-10px);  } to { opacity: 1; transform: translateX(0); } }
@keyframes wh-fade-left  { from { opacity: 0; transform: translateX(10px);   } to { opacity: 1; transform: translateX(0); } }

body { font-family: 'Noto Serif', serif; font-size: clamp(14px, 0.85vw, 20px); line-height: 1.6; margin: 0; padding: 0; color: #333; background-color: #09142A; scrollbar-gutter: stable; overflow-y: scroll; }

header { background-color: #09142A; color: white; padding: 20px 0 2px 0; text-align: center; width: 100%; position: fixed; top: 0; z-index: 100; isolation: isolate; }
header h1 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 2.5em; margin: 0; letter-spacing: 0.04em; color: #3598DB; line-height: 1.1; }
.subtext { font-size: 0.78em; color: #ffffff; margin: 4px 0 6px; }

.lang-bar { display: flex; gap: 4px; position: absolute; top: 12px; right: 16px; }
.lang-btn { background: transparent; border: 1.5px solid transparent; border-radius: 4px; padding: 2px 3px; cursor: pointer; line-height: 0; transition: border-color 0.2s, transform 0.15s; }
.lang-btn:hover { transform: scale(1.18); border-color: rgba(255,255,255,0.3); }
.lang-btn.active { border-color: #3598DB; }
.lang-btn.lang-disabled { opacity: 0.35; cursor: not-allowed; }
.lang-btn.lang-disabled:hover { transform: none; border-color: transparent; }
.lang-btn[data-tooltip] { position: relative; }
.lang-btn[data-tooltip]::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #09142A; color: #fff; font-size: 0.72rem; font-family: 'Noto Serif', serif; white-space: nowrap; padding: 4px 8px; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0s; }
.lang-btn[data-tooltip]:hover::after { opacity: 1; }

.keywords { display: flex; justify-content: center; gap: 20px; font-family: 'Montserrat', sans-serif; font-weight: bold; color: #3598DB; margin-bottom: 8px; }
.keywords span { background-color: transparent; }

nav { background-color: #ffffff; text-align: center; width: calc(100% - 40px); margin: 0 auto; border-radius: 12px; padding: 6px 0; }
nav a { margin-right: 20px; text-decoration: none; color: #2574CA; font-family: 'Noto Serif', serif; font-weight: 500; font-size: 0.9em; padding: 4px 6px; border-radius: 5px; transition: background 0.2s; }
nav a:hover { background: #e8f0fa; }
nav a.active-page { font-family: 'Montserrat', sans-serif; color: #2574CA; font-weight: 700; text-decoration: underline; text-decoration-color: #09142A; text-underline-offset: 3px; text-decoration-thickness: 2px; }

main { font-family: 'Noto Serif', serif; font-size: 0.875em; padding: 30px 20px 140px 20px; max-width: min(86vw, 1800px); margin: 0 auto; }
main h2 { color: #2574CA; text-align: center; margin-top: 0; margin-bottom: 20px; font-size: 1.7em; }
main h3 { color: #2574CA; }
.content-card { background-color: #D6E2EC; border: 1px solid #C8D4DE; border-radius: 8px; padding: 25px; max-width: min(78vw, 1240px); margin: 0 auto; }
@media (min-width: 2000px) { .content-card { max-width: 1500px; } }

.info-box { background: #fff; border: 1.5px solid #D7E1E8; border-radius: 6px; padding: 18px; cursor: pointer; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; }
.info-box:hover { border-color: #2574CA; transform: translateY(-4px); box-shadow: 0 6px 18px rgba(53,152,219,0.14); }
.info-box.active { border-color: #2574CA; background-color: #eaf4fb; }
.info-box h3, .info-box h4 { font-size: 1.2rem; margin: 0 0 8px 0; }
.info-box p { font-size: 0.95em; color: #444; margin: 0; }

.cta-bar { background: #09142A; border-left: 4px solid #2574CA; border-radius: 0 6px 6px 0; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.cta-bar p { margin: 0; color: #D6E2EC; font-size: 1em; }
.cta-button { display: inline-block; background-color: #2574CA; color: #fff; padding: 10px 32px; border-radius: 6px; text-decoration: none; font-family: 'Noto Serif', serif; font-weight: 400; font-size: 1.2em; white-space: nowrap; transition: background 0.25s; flex-shrink: 0; cursor: pointer; border: none; }
.cta-button:hover { background-color: #2079b8; }
.cta-menu-wrap { position: relative; flex-shrink: 0; }
.cta-dropdown { display: none; position: absolute; bottom: calc(100% + 8px); right: 0; background: #fff; border: 1.5px solid #2574CA; border-radius: 8px; box-shadow: 0 8px 24px rgba(9,20,42,0.18); min-width: 200px; z-index: 200; overflow: hidden; }
.cta-dropdown.open { display: block; }
.cta-option { display: flex; align-items: center; gap: 10px; padding: 12px 16px; text-decoration: none; color: #09142A; font-family: 'Noto Serif', serif; font-size: 1em; cursor: pointer; transition: background 0.15s; border: none; background: transparent; width: 100%; text-align: left; }
.cta-option:hover { background: #eaf4fb; color: #2574CA; }
.cta-option-icon { font-size: 1.1em; flex-shrink: 0; }
.cta-option-label { font-weight: 600; display: block; font-size: 0.9em; }
.cta-option-sub { display: block; font-size: 0.75em; color: #666; font-weight: 400; }
.cta-option:hover .cta-option-sub { color: #2574CA; }

.brand { font-family: 'Montserrat', sans-serif; color: #3598DB; }
.regtm { font-size: 0.5em; vertical-align: super; }
.brandTagline { display: block; font-size: 0.6em; color: #7E8C8D; font-weight: 500; margin-top: 0.2em; letter-spacing: 0.04em; }

footer { background-color: #f8f9fa; padding: 1px; text-align: center; font-size: 0.55rem; position: fixed; width: 100%; bottom: 0; }
footer p { padding: 10px 0; }
.wh-footer { color: #2574CA; }
.brandTagline { display: block; font-size: 0.6em; color: #7E8C8D; font-weight: 400; letter-spacing: 0.04em; margin-top: 0.2em; }

@media (max-width: 768px) {
  main { max-width: 100%; padding-left: 12px; padding-right: 12px; }
  .content-card { max-width: 100%; padding: 16px; }
  .keywords { flex-wrap: wrap; row-gap: 4px; }
}
@media (min-width: 769px) {
  .keywords span { animation: wh-fade-down 0.8s ease-out both; }
  main h2 { animation: wh-fade-down 0.9s ease-out 0.1s both; }
  .info-box { animation: wh-fade-up 0.6s ease-out both; }
  .cta-bar { animation: wh-fade-up 0.9s ease-out both; }
}
@media (max-width: 480px) {
  header h1 { font-size: 1.8em; }
  .lang-bar { gap: 2px; right: 12px; }
  .lang-btn svg { width: 14px; height: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}