@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

@font-face {
  font-family: 'Regular';
  src: url('/cmporto_index/fonts/Regular-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Regular';
  src: url('/cmporto_index/fonts/Regular-RegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Regular';
  src: url('/cmporto_index/fonts/Regular-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Regular';
  src: url('/cmporto_index/fonts/Regular-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Regular';
  src: url('/cmporto_index/fonts/Regular-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Regular';
  src: url('/cmporto_index/fonts/Regular-Extrabold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Regular';
  src: url('/cmporto_index/fonts/Regular-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}

:root {
  --cf-primary-main: #000F9F;
  --cf-primary-dark: #00095F;
  
  --cf-white: #FFF;
  --cf-black: #333;
  
  --cf-grey-500: #9E9E9E;
  --cf-grey-600: #6B7280;
  
  --cf-blue-light: #BFC5FF;
  --cf-blue-medium: #003399;
  --cf-blue-dark: #072A8A;
  --cf-blue-darker: #000880;
  --cf-blue-hover: #DFE6FF;
  
  --cf-text-primary: #000000;
  --cf-text-secondary: #334155;
  --cf-text-tertiary: #1F2937;
  --cf-text-muted: #6B7280;
  --cf-text-dark: #2A2A2A;
  --cf-text-darker: #444;
  --cf-text-black: #0A0A0A;
  
  --cf-bg-white: #FFF;
  --cf-bg-light: #F5F7FB;
  --cf-bg-blue: #F4F5FF;
  --cf-bg-blue-light: #F7F9FF;
  --cf-bg-table-stripe: #F8FAFC;
  
  --font-regular: 'Regular', sans-serif;
  --font-roboto: 'Roboto', Arial, sans-serif;

  --cf-border-light: #E5E7EB;
  --cf-border-grey: #D9D9D9;
  --cf-border-main: #DDD;
  --cf-border-table: #EEF2F6;
  --cf-border-blue-light: #DDE3F3;
  --cf-border-purple-light: #DFE1FF;
  
  --cf-scrollbar-thumb: #C0C0C0;
  --cf-scrollbar-track: #D4D3D3;
  --cf-scrollbar-bg: #F0F0F0;
  
  --cf-gradient-dataset: linear-gradient(135deg, #0b63ce, #0a2f6f);
  --cf-gradient-toolbar: linear-gradient(90deg, #001F6D, #3A75C4, #ABD5F5);
  
  --brand-bg: #0F2F7F;
  --brand-blue: var(--cf-primary-main);
  --brand-accent: #2962ff;
  --ink: #0b0c0f;
  --muted: var(--cf-text-muted);
  --card: var(--cf-bg-white);
  --card-border: var(--cf-border-light);
  
  --radius: 16px;
  --shadow: 0 8px 24px rgba(0,0,0,.12);
  --cat-card-min-h: 182px;
  --cat-icon-size: 108;
}

* {
  font-family: 'Regular', sans-serif;
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 16px;
}

.btn-outline {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid var(--brand-blue);
  color: var(--brand-blue);
  text-decoration: none;
  font-weight: 700;
}

.btn-outline:hover {
  background: var(--brand-blue);
  color: var(--cf-white);
}

.section-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 14px 0;
  color: var(--ink);
}

html, body { 
  min-height: 100%; 
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main,
.main[role="main"] {
  flex: 1 0 auto;
}


.user-account-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.user-account-link:hover { text-decoration: none; }
.user-display-name { display: inline-block; }
.header-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; transition: opacity 0.2s ease; }
.header-icon svg { display: none; }
.header-icon:hover { opacity: 0.7; }
.header-icon-arrow { width: 10px; height: 6px; }
.cmporto-header.is-home .header-icon-arrow { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M0.75 0.75L4.75 4.75L8.75 0.75" stroke="%23000F9F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>'); background-repeat: no-repeat; background-position: center; background-size: contain; }
.cmporto-header.is-inner .header-icon-arrow { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M0.75 0.75L4.75 4.75L8.75 0.75" stroke="%23FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>'); background-repeat: no-repeat; background-position: center; background-size: contain; }
.cmporto-header.is-home .header-icon-bell { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M15 6.66669C15 5.34061 14.4732 4.06883 13.5355 3.13115C12.5979 2.19347 11.3261 1.66669 10 1.66669C8.67392 1.66669 7.40215 2.19347 6.46447 3.13115C5.52678 4.06883 5 5.34061 5 6.66669C5 12.5 2.5 14.1667 2.5 14.1667H17.5C17.5 14.1667 15 12.5 15 6.66669Z" stroke="%23000F9F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.4417 17.5C11.2952 17.7526 11.0849 17.9622 10.8319 18.1079C10.5789 18.2537 10.292 18.3304 10 18.3304C9.70802 18.3304 9.42113 18.2537 9.16814 18.1079C8.91515 17.9622 8.70486 17.7526 8.55835 17.5" stroke="%23000F9F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>'); background-repeat: no-repeat; background-position: center; background-size: contain; }
.cmporto-header.is-inner .header-icon-bell { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M15 6.66669C15 5.34061 14.4732 4.06883 13.5355 3.13115C12.5979 2.19347 11.3261 1.66669 10 1.66669C8.67392 1.66669 7.40215 2.19347 6.46447 3.13115C5.52678 4.06883 5 5.34061 5 6.66669C5 12.5 2.5 14.1667 2.5 14.1667H17.5C17.5 14.1667 15 12.5 15 6.66669Z" stroke="%23FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.4417 17.5C11.2952 17.7526 11.0849 17.9622 10.8319 18.1079C10.5789 18.2537 10.292 18.3304 10 18.3304C9.70802 18.3304 9.42113 18.2537 9.16814 18.1079C8.91515 17.9622 8.70486 17.7526 8.55835 17.5" stroke="%23FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>'); background-repeat: no-repeat; background-position: center; background-size: contain; }
.cmporto-header.is-home .user-account-link { color: var(--cf-primary-main); }
.cmporto-header.is-inner .user-account-link { color: var(--cf-white); }
.cmporto-header.is-home .user-account-link:hover { color: var(--cf-primary-dark); }
.cmporto-header.is-inner .user-account-link:hover { color: var(--cf-blue-light); }

.mainnav > ul > li > a {
  color: var(--cf-primary-main);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.cmporto-header.is-inner .mainnav > ul > li > a {
  color: var(--cf-white);
}
.mainnav > ul > li > a:hover {
  color: var(--cf-primary-dark);
}
.cmporto-header.is-inner .mainnav > ul > li > a:hover {
  color: var(--cf-blue-light);
}

.user-menu-wrap {
  position: relative;
  z-index: 1200;
  overflow: visible;
}
.user-menu-trigger { cursor: pointer; user-select: none; }
.user-menu-trigger.open .header-icon-arrow { transform: rotate(180deg); }
.header-icon-arrow { transition: transform 0.2s ease; }

.user-dropdown {
  display: flex;
  flex-direction: row;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: #ffffff;
  border-radius: 10px;
  border: 2px solid var(--cf-primary-main);
  box-shadow: 0 8px 24px rgba(0,15,159,0.13);
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 1200;
  overflow: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.user-dropdown.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.user-dropdown li {
  flex: 1;
  margin: 0;
  display: flex;
}
.user-dropdown li + li { border-left: 1px solid var(--cf-border-light); }
.user-dropdown li a,
.user-dropdown li button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 22px;
  color: var(--cf-primary-main) !important;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
  background: transparent !important;
  border: none;
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
  transition: background 0.15s ease;
}
.user-dropdown li a:hover,
.user-dropdown li button:hover {
  background: var(--cf-bg-blue) !important;
  color: var(--cf-primary-dark) !important;
}
.user-dropdown li form { margin: 0; padding: 0; width: 100%; display: flex; }

/* ========================================
   HAMBURGER / MOBILE NAV
   ======================================== */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.cmporto-header.is-home .nav-toggle span { background: var(--cf-primary-main); }
.cmporto-header.is-inner .nav-toggle span { background: var(--cf-white); }

.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.cmporto-header { position: relative; }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }

  /* Override Bootstrap stacking: keep logo + hamburger on same row */
  .cmporto-header .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .cmporto-header .row > .col-sm-12.col-md-6:first-child {
    flex: 1 1 auto;
    width: auto !important;
    float: none !important;
    min-width: 0;
  }

  .cmporto-header .row > .col-sm-12.col-md-6:last-child {
    flex: 0 0 auto;
    width: auto !important;
    float: none !important;
    padding-left: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .mainnav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    z-index: 1100;
    padding: 12px 16px 16px;
  }

  .cmporto-header.is-home .mainnav { background: var(--cf-white); }
  .cmporto-header.is-inner .mainnav { background: var(--cf-primary-main); }

  .mainnav.open { display: block; }

  .mainnav > ul {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .mainnav > ul > li { width: 100%; }
  .mainnav > ul > li:has(> a, > div, .user-menu-wrap) { width: 100%; }
  /* Hide plain text separators (e.g. "|") on mobile */
  .mainnav > ul > li:not(:has(a, button, div)) { display: none; }

  .mainnav > ul > li > a,
  .mainnav > ul > li > div {
    display: block;
    padding: 10px 4px;
    font-size: 15px;
  }
}