/* ################################################
        Website Application Based Custom StyleSheet
        - shared acrros every pages
    ################################################### */

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

:root {
  --bg-cream: #F7F5F0;
  --bg-cream-2: #FAFAF6;
  --bg-card: #FFFFFF;
  --navy: #0A1F44;
  --navy-2: #15294F;
  --navy-3: #1A3358;
  --mint: #6FE7B7;
  --mint-deep: #00875F;
  --mint-deeper: #00543C;
  --mint-soft: #E8F7F0;
  --text: #1A1A1A;
  --muted: #6B6B6B;
  --muted-2: #9A9A9A;
  --border: #E0DCD2;
  --red: #C13030;
  --red-soft: #FCE8E8;
  --red-dark: #911D1D;
  --amber: #9A6B0A;
  --amber-soft: #FEF4E0;
  --blue-soft: #E3EEF9;
  --blue: #2A5FA8;
  --light-blue: #C7DFF5;
}

body {
   line-height: 1.5;
   color: var(--text);
   background: var(--bg-cream);
   font-family: 'Geist', -apple-system, system-ui, sans-serif;
}

.display {
   letter-spacing: -0.01em;
   font-family: 'Fraunces', Georgia, serif;
}
a {
   color: inherit;
   text-decoration: none;
}
button {
   cursor: pointer;
   border: none;
   font-family: inherit;
}

.container {
   margin: 0 auto;
   padding: 0 36px;
   max-width: 1280px;
}
.sr-only {
   width: 1px;
   height: 1px;
   overflow: hidden;
   position: absolute;
   clip: rect(0,0,0,0);
}

/* ======== Tope Announcement Bar ======== */
   .top-bar {
      background: var(--navy);
      color: var(--light-blue);
      font-size: 12px;
      padding: 9px 0;
   }
   .top-bar .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
   }
   .top-bar span {
      display: flex;
      gap: 6px;
      align-items: center;
   }
   .top-bar .verified { color: var(--mint); }

   /* ======== Header and Navbar ======== */
   header.site-header {
      padding: 20px 0;
      background: var(--bg-cream);
   }
   header.site-header .container {
      display: flex;
      gap: 40px;
      align-items: center;
      justify-content: space-between;
   }

   .logo {
      display: flex;
      gap: 11px;
      align-items: center;
   }
   .logo-mark {
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 19px;
      border-radius: 9px;
      background: var(--navy); color: var(--mint);
   }
   .logo-text {
      line-height: 1;
      color: var(--navy);
      font-size: 18px;
      font-weight: 500;
      font-family: 'Fraunces', serif;
   }
   .logo-sub {
      margin-top: 3px;
      color: var(--muted);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
   }

   nav ul {
      gap: 28px;
      display: flex;
      list-style: none;
   }
   nav a {
      padding: 4px 0;
      color: var(--text);
      font-size: 14px;
      transition: color 0.15s;
   }
   nav a:hover { color: var(--navy); }
   nav a.active {
      position: relative;
      color: var(--navy);
      font-weight: 500;
   }
   nav a.active::after {
      left: 0;
      bottom: -6px;
      right: 0;
      height: 2px;
      position: absolute;
      content: '';
      background: var(--mint);
   }
   .header-right {
      display: flex;
      gap: 14px;
      align-items: center;
      font-size: 14px;
   }
   .lang-switch {
      display: flex;
      gap: 4px;
      align-items: center;
      color: var(--muted);
   }
   .btn-signin {
      padding: 9px 17px;
      display: inline-flex;
      gap: 5px;
      align-items: center;
      color: #fff;
      font-size: 13px;
      border-radius: 999px;
      background: var(--navy);
   }
   .btn-signin:hover { background: #061634; }

   /* ======== Page Hero (Used On Subpages) ======== */
   .page-hero {
      padding: 48px 0 36px;
      background: var(--bg-cream);
   }
   .page-hero .eyebrow {
      margin-bottom: 10px;
      letter-spacing: 0.14em;
      color: var(--mint-deep);
      font-size: 11px;
      text-transform: uppercase;
   }
   .page-hero h1 {
      max-width: 720px;
      margin-bottom: 14px;
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--navy);
      font-size: 52px;
      font-weight: 400;
      font-family: 'Fraunces', serif;
   }
   .page-hero h1 em {
      color: var(--mint-deep);
      font-style: italic;
   }
   .page-hero p.lede {
      max-width: 600px;
      line-height: 1.55;
      color: #4A4A4A;
      font-size: 16px;
   }

   /* Bread Crumbs */
   .crumbs {
      margin-bottom: 18px;
      display: flex;
      gap: 8px;
      align-items: center;
      color: var(--muted);
      font-size: 12px;
   }
   .crumbs a { color: var(--muted); }
   .crumbs a:hover { color: var(--navy); }
   .crumbs .sep { color: var(--muted-2); }
   .crumbs .here { color: var(--navy); }

/* ======== Common Components ======== */
   /* Buttons */
   .btn {
      padding: 11px 20px;
      display: inline-flex;
      gap: 6px;
      align-items: center;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      border-radius: 10px;
      transition: all 0.15s;
   }
   .btn-primary {
      color: #fff;
      background: var(--navy);
   }
   .btn-primary:hover { background: #061634; }
   .btn-accent {
      color: var(--navy);
      background: var(--mint);
   }
   .btn-accent:hover { background: #58D9A7; }
   .btn-ghost {
      color: var(--navy);
      background: transparent;
      border: 1px solid var(--border);
   }
   .btn-ghost:hover { border-color: var(--navy); }
   .btn-danger {
      color: #fff;
      background: var(--red);
   }
   .btn-danger:hover { background: #971F1F; }

   /* Pills & Badges */
   .pill {
      padding: 5px 12px;
      display: inline-flex;
      gap: 5px;
      align-items: center;
      font-size: 12px;
      font-weight: 500;
      border-radius: 999px;
   }
   .pill-mint {
      color: var(--mint-deep);
      background: var(--mint-soft);
   }
   .pill-amber {
      color: var(--amber);
      background: var(--amber-soft);
   }
   .pill-red {
      color: var(--red-dark);
      background: var(--red-soft);
   }
   .pill-blue {
      color: var(--blue);
      background: var(--blue-soft);
   }
   .pill-gray {
      color: var(--muted);
      background: #F0EDE5;
   }

   /* Sections */
   .eyebrow {
      margin-bottom: 6px;
      letter-spacing: 0.14em;
      color: var(--mint-deep);
      font-size: 11px;
      text-transform: uppercase;
   }
   .section-title {
      line-height: 1.1;
      letter-spacing: -0.01em;
      color: var(--navy);
      font-size: 30px;
      font-weight: 400;
      font-family: 'Fraunces', serif;
   }
   .section-header {
      margin-bottom: 22px;
      display: flex;
      align-items: end;
      justify-content: space-between;
   }
   .section-link {
      display: flex;
      align-items: center;
      gap: 5px;
      color: var(--navy);
      font-size: 14px;
   }

   /* Cards */
   .card {
      padding: 22px;
      border-radius: 14px;
      background: var(--bg-card);
      border: 1px solid var(--border);
   }

/* ======== Footer ======== */
   footer.site-footer {
      margin-top: 60px;
      padding: 44px 0 24px;
      color: var(--light-blue);
      background: var(--navy);
   }
   .foot-top {
      margin-bottom: 32px;
      display: grid;
      gap: 24px;
      grid-template-columns: 1.3fr 1fr 1fr 1fr;
   }
   .foot-brand {
      margin-bottom: 12px;
      line-height: 1.15;
      color: #fff;
      font-family: 'Fraunces', serif;
      font-size: 30px;
   }
   .foot-brand em {
      color: var(--mint);
      font-style: italic;
   }
   .foot-desc {
      max-width: 240px;
      line-height: 1.6;
      color: #8FAACC;
      font-size: 12px;
   }
   .foot-col-title {
      margin-bottom: 14px;
      font-size: 11px;
      color: #fff;
      letter-spacing: 0.1em;
      font-weight: 500;
      text-transform: uppercase;
   }
   .foot-link {
      margin-bottom: 9px;
      display: block;
      color: #8FAACC;
      font-size: 13px;
      transition: color 0.15s;
   }
   .foot-link:hover { color: #fff; }
   .foot-link i {
      margin-right: 6px;
      vertical-align: -2px;
      font-size: 13px;
   }
   .foot-bottom { 
      padding-top: 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #8FAACC;
      font-size: 11px;
      border-top: 1px solid var(--navy-3);
   }
   .foot-social { 
      display: flex;
      gap: 14px;
   }
   .foot-social a { 
      color: #8FAACC;
      transition: color 0.15s;
   }
   .foot-social a:hover { color: var(--mint); }
   .foot-social i { font-size: 17px; }

   /* ################
      Media Query
   ################### */
   @media (max-width: 1024px) {
      .container { padding: 0 24px; }
      .foot-top { grid-template-columns: 1fr 1fr; }
      .page-hero h1 { font-size: 38px; }
   }
   @media (max-width: 640px) {
      .container { padding: 0 18px; }
      header.site-header .container {
         gap: 16px;
         flex-wrap: wrap;
      }
      nav {
         width: 100%;
         order: 3;
         overflow-x: auto;
      }
      nav ul { gap: 18px; }
      .foot-top { grid-template-columns: 1fr; }
      .page-hero h1 { font-size: 30px; }
   }