/* ============================================================
   assets/css/main.css - OroCryptoTrends Global Styles
      ============================================================ */

      /* ── Reset & Variables ─────────────────────────────────────── */
      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
      :root {
          --primary:  #0052ff;
              --dark:     #090e13;
                  --dark2:    #111827;
                      --border:   #e5e7eb;
                          --gray:     #6b7280;
                              --light-bg: #f3f4f6;
                                  --white:    #ffffff;
                                      --green:    #22c55e;
                                          --red:      #ef4444;
                                          }
                                          html { scroll-behavior: smooth; }
                                          body { font-family: 'Inter', sans-serif; background: var(--light-bg); color: #1f2937; line-height: 1.6; }
                                          a    { text-decoration: none; color: inherit; }
                                          img  { display: block; max-width: 100%; }

                                          /* ── Layout ────────────────────────────────────────────────── */
                                          .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

                                          /* ── Header ────────────────────────────────────────────────── */
                                          header {
                                              background: var(--dark2);
                                                  height: 70px;
                                                      position: sticky;
                                                          top: 0;
                                                              z-index: 1000;
                                                                  border-bottom: 2px solid var(--primary);
                                                                      box-shadow: 0 2px 20px rgba(0,0,0,.4);
                                                                      }
                                                                      .header-container {
                                                                          max-width: 1200px; margin: 0 auto; padding: 0 20px;
                                                                              height: 100%; display: flex; align-items: center;
                                                                                  justify-content: space-between; gap: 20px;
                                                                                  }
                                                                                  .logo a { color: #fff; font-size: 1.35rem; font-weight: 800; letter-spacing: -.5px; display: flex; align-items: center; }
                                                                                  .logo-img { height: 34px; }
                                                                                  .logo-accent { color: var(--primary); }

                                                                                  /* ── Desktop Nav ───────────────────────────────────────────── */
                                                                                  .nav-links { display: flex; gap: 2px; list-style: none; }
                                                                                  .nav-item  { position: relative; }
                                                                                  .nav-link  {
                                                                                      color: #d1d5db; font-size: 12.5px; font-weight: 600;
                                                                                          padding: 24px 11px; display: flex; align-items: center; gap: 5px;
                                                                                              text-transform: uppercase; transition: color .2s; white-space: nowrap;
                                                                                              }
                                                                                              .nav-link:hover, .nav-link.active { color: #fff; }
                                                                                              .nav-link.active { border-bottom: 2px solid var(--primary); }
                                                                                              .nav-caret { font-size: 9px; transition: transform .2s; }
                                                                                              .nav-item:hover .nav-caret { transform: rotate(180deg); }

                                                                                              .dropdown {
                                                                                                  display: none; position: absolute; top: 70px; left: 0;
                                                                                                      background: #1f2937; min-width: 210px;
                                                                                                          border-top: 2px solid var(--primary);
                                                                                                              border-radius: 0 0 8px 8px;
                                                                                                                  box-shadow: 0 8px 30px rgba(0,0,0,.4);
                                                                                                                      padding: 6px; z-index: 999;
                                                                                                                      }
                                                                                                                      .nav-item:hover .dropdown { display: block; }
                                                                                                                      .dropdown li { list-style: none; }
                                                                                                                      .dropdown a {
                                                                                                                          display: flex; align-items: center; gap: 8px;
                                                                                                                              padding: 9px 12px; color: #d1d5db; font-size: 13px;
                                                                                                                                  border-radius: 6px; transition: background .15s, color .15s;
                                                                                                                                  }
                                                                                                                                  .dropdown a:hover { background: rgba(255,255,255,.07); color: #fff; }
                                                                                                                                  .dropdown a i { color: var(--primary); width: 14px; font-size: 11px; }

                                                                                                                                  /* ── Header Right ──────────────────────────────────────────── */
                                                                                                                                  .header-right { display: flex; align-items: center; gap: 12px; }
                                                                                                                                  .search-form {
                                                                                                                                      display: flex; align-items: center; background: #374151;
                                                                                                                                          border-radius: 8px; padding: 6px 12px;
                                                                                                                                              border: 1px solid transparent; transition: border-color .2s;
                                                                                                                                              }
                                                                                                                                              .search-form:focus-within { border-color: var(--primary); }
                                                                                                                                              .search-icon { color: #9ca3af; font-size: 13px; margin-right: 7px; }
                                                                                                                                              .search-form input {
                                                                                                                                                  background: none; border: none; color: #fff;
                                                                                                                                                      font-size: 13px; width: 130px; outline: none;
                                                                                                                                                      }
                                                                                                                                                      .search-form input::placeholder { color: #9ca3af; }
                                                                                                                                                      .btn-signin {
                                                                                                                                                          background: var(--primary); color: #fff; padding: 8px 18px;
                                                                                                                                                              border-radius: 8px; font-weight: 700; font-size: 13px;
                                                                                                                                                                  white-space: nowrap; transition: opacity .2s;
                                                                                                                                                                  }
                                                                                                                                                                  .btn-signin:hover { opacity: .88; }
                                                                                                                                                                  .menu-toggle {
                                                                                                                                                                      display: none; background: none; border: none;
                                                                                                                                                                          color: #fff; font-size: 22px; cursor: pointer;
                                                                                                                                                                          }

                                                                                                                                                                          /* ── Crypto Ticker ─────────────────────────────────────────── */
                                                                                                                                                                          .ticker-bar { background: var(--dark2); border-bottom: 1px solid #1f2937; padding: 6px 0; overflow: hidden; font-size: 12px; }
                                                                                                                                                                          .ticker-inner { display: flex; align-items: center; gap: 12px; padding: 0 20px; }
                                                                                                                                                                          .ticker-label { background: var(--primary); color: #fff; font-weight: 700; font-size: 10px; padding: 2px 8px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; text-transform: uppercase; }
                                                                                                                                                                          .ticker-track { overflow: hidden; flex: 1; }
                                                                                                                                                                          .ticker-scroll { display: inline-flex; gap: 40px; white-space: nowrap; animation: tickerMove 50s linear infinite; will-change: transform; }
                                                                                                                                                                          .ticker-item { display: inline-flex; align-items: center; gap: 6px; color: #9ca3af; }
                                                                                                                                                                          .ticker-item img { width: 16px; height: 16px; border-radius: 50%; }
                                                                                                                                                                          .ticker-item .sym   { color: #e5e7eb; font-weight: 600; }
                                                                                                                                                                          .ticker-item .price { color: #fff; }
                                                                                                                                                                          .ticker-item .up    { color: var(--green); }
                                                                                                                                                                          .ticker-item .down  { color: var(--red); }
                                                                                                                                                                          @keyframes tickerMove { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

                                                                                                                                                                          /* ── Section Header ────────────────────────────────────────── */
                                                                                                                                                                          .section-header {
                                                                                                                                                                              display: flex; align-items: center; justify-content: space-between;
                                                                                                                                                                                  margin: 36px 0 18px; padding-bottom: 12px; border-bottom: 2px solid var(--border);
                                                                                                                                                                                  }
                                                                                                                                                                                  .section-header h2 {
                                                                                                                                                                                      font-size: 1.1rem; font-weight: 800; text-transform: uppercase;
                                                                                                                                                                                          letter-spacing: .5px; padding-left: 14px; position: relative;
                                                                                                                                                                                          }
                                                                                                                                                                                          .section-header h2::before {
                                                                                                                                                                                              content: ''; position: absolute; left: 0; top: 0; bottom: 0;
                                                                                                                                                                                                  width: 4px; background: var(--primary); border-radius: 2px;
                                                                                                                                                                                                  }
                                                                                                                                                                                                  .view-all { font-size: 13px; font-weight: 600; color: var(--primary); display: flex; align-items: center; gap: 5px; }
                                                                                                                                                                                                  .view-all:hover { text-decoration: underline; }

                                                                                                                                                                                                  /* ── Post Card ─────────────────────────────────────────────── */
                                                                                                                                                                                                  .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; }
                                                                                                                                                                                                  .post-card {
                                                                                                                                                                                                      background: var(--white); border-radius: 12px; overflow: hidden;
                                                                                                                                                                                                          border: 1px solid var(--border); transition: transform .2s, box-shadow .2s;
                                                                                                                                                                                                          }
                                                                                                                                                                                                          .post-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.09); }
                                                                                                                                                                                                          .post-card img { width: 100%; height: 185px; object-fit: cover; }
                                                                                                                                                                                                          .post-card-body { padding: 15px; }
                                                                                                                                                                                                          .cat-tag { font-size: 10px; font-weight: 700; color: var(--primary); text-transform: uppercase; margin-bottom: 6px; }
                                                                                                                                                                                                          .post-card-body h3 { font-size: 14.5px; font-weight: 700; line-height: 1.35; margin-bottom: 10px; }
                                                                                                                                                                                                          .post-card-body h3 a { color: #1f2937; }
                                                                                                                                                                                                          .post-card-body h3 a:hover { color: var(--primary); }
                                                                                                                                                                                                          .post-meta { font-size: 12px; color: var(--gray); display: flex; gap: 12px; }
                                                                                                                                                                                                          .post-meta i { margin-right: 3px; }

                                                                                                                                                                                                          /* ── Buttons ───────────────────────────────────────────────── */
                                                                                                                                                                                                          .btn { display: inline-block; padding: 10px 22px; border-radius: 8px; font-weight: 700; font-size: 13px; transition: opacity .2s; }
                                                                                                                                                                                                          .btn-primary { background: var(--primary); color: #fff; }
                                                                                                                                                                                                          .btn-primary:hover { opacity: .88; }

                                                                                                                                                                                                          /* ── Footer ────────────────────────────────────────────────── */
                                                                                                                                                                                                          footer { background: var(--dark); color: #6b7280; padding: 55px 0 0; margin-top: 60px; border-top: 1px solid #1f2937; }
                                                                                                                                                                                                          .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 20px; }
                                                                                                                                                                                                          .footer-col h4 { color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 16px; }
                                                                                                                                                                                                          .footer-col p  { font-size: 13.5px; line-height: 1.7; }
                                                                                                                                                                                                          .footer-col a  { display: block; color: #6b7280; font-size: 13.5px; margin-bottom: 9px; transition: color .2s, padding-left .15s; }
                                                                                                                                                                                                          .footer-col a:hover { color: #fff; padding-left: 4px; }
                                                                                                                                                                                                          .footer-social { display: flex; gap: 10px; margin-top: 16px; }
                                                                                                                                                                                                          .footer-social a {
                                                                                                                                                                                                              width: 36px; height: 36px; background: #1f2937; border-radius: 8px;
                                                                                                                                                                                                                  display: flex; align-items: center; justify-content: center;
                                                                                                                                                                                                                      color: #9ca3af; font-size: 14px; transition: background .2s, color .2s;
                                                                                                                                                                                                                          padding-left: 0 !important;
                                                                                                                                                                                                                          }
                                                                                                                                                                                                                          .footer-social a:hover { background: var(--primary); color: #fff; }
                                                                                                                                                                                                                          .footer-bottom { text-align: center; border-top: 1px solid #1f2937; padding: 20px; margin-top: 40px; font-size: 13px; color: #4b5563; }

                                                                                                                                                                                                                          /* ── Mobile Sidebar ────────────────────────────────────────── */
                                                                                                                                                                                                                          #sidebarOverlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1998; }
                                                                                                                                                                                                                          #sidebarOverlay.active { display: block; }
                                                                                                                                                                                                                          #sidebarMenu {
                                                                                                                                                                                                                              position: fixed; top: 0; left: -290px; width: 272px; height: 100%;
                                                                                                                                                                                                                                  background: var(--dark2); z-index: 1999; overflow-y: auto;
                                                                                                                                                                                                                                      transition: left .28s ease; padding-bottom: 40px;
                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                      #sidebarMenu.active { left: 0; }
                                                                                                                                                                                                                                      .sidebar-head {
                                                                                                                                                                                                                                          display: flex; align-items: center; justify-content: space-between;
                                                                                                                                                                                                                                              padding: 18px 20px; border-bottom: 1px solid #374151;
                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                              .sidebar-logo-text { color: #fff; font-size: 1.1rem; font-weight: 800; }
                                                                                                                                                                                                                                              .sidebar-logo-text span { color: var(--primary); }
                                                                                                                                                                                                                                              .sidebar-close { background: none; border: none; color: #9ca3af; font-size: 20px; cursor: pointer; }
                                                                                                                                                                                                                                              .mob-link {
                                                                                                                                                                                                                                                  display: flex; align-items: center; justify-content: space-between;
                                                                                                                                                                                                                                                      padding: 13px 20px; color: #d1d5db; font-size: 13.5px; font-weight: 600;
                                                                                                                                                                                                                                                          text-transform: uppercase; border-bottom: 1px solid #1f2937; cursor: pointer;
                                                                                                                                                                                                                                                          }
                                                                                                                                                                                                                                                          .mob-link:hover { background: rgba(255,255,255,.05); color: #fff; }
                                                                                                                                                                                                                                                          .mob-link i:first-child { margin-right: 8px; color: var(--primary); }
                                                                                                                                                                                                                                                          .mob-caret { font-size: 9px; opacity: .5; }
                                                                                                                                                                                                                                                          .mob-sub { display: none; background: rgba(0,0,0,.25); }
                                                                                                                                                                                                                                                          .mob-sub.open { display: block; }
                                                                                                                                                                                                                                                          .mob-sub a {
                                                                                                                                                                                                                                                              display: flex; align-items: center; gap: 8px;
                                                                                                                                                                                                                                                                  padding: 10px 20px 10px 34px; color: #9ca3af; font-size: 13px;
                                                                                                                                                                                                                                                                      border-bottom: 1px solid rgba(255,255,255,.04);
                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                      .mob-sub a:hover { color: #fff; }
                                                                                                                                                                                                                                                                      .mob-sub a i { color: var(--primary); font-size: 11px; width: 14px; }

                                                                                                                                                                                                                                                                      /* ── Breadcrumb ────────────────────────────────────────────── */
                                                                                                                                                                                                                                                                      .breadcrumb { padding: 14px 0; font-size: 13px; color: var(--gray); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
                                                                                                                                                                                                                                                                      .breadcrumb a { color: var(--primary); }
                                                                                                                                                                                                                                                                      .breadcrumb a:hover { text-decoration: underline; }

                                                                                                                                                                                                                                                                      /* ── Page Header Band ──────────────────────────────────────── */
                                                                                                                                                                                                                                                                      .page-header { background: var(--dark2); color: #fff; padding: 28px 0; margin-bottom: 30px; border-bottom: 3px solid var(--primary); }
                                                                                                                                                                                                                                                                      .page-header h1 { font-size: 1.9rem; font-weight: 800; margin-bottom: 5px; }
                                                                                                                                                                                                                                                                      .page-header p  { color: #9ca3af; font-size: 13.5px; }

                                                                                                                                                                                                                                                                      /* ── Pagination ────────────────────────────────────────────── */
                                                                                                                                                                                                                                                                      .pagination { display: flex; gap: 8px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
                                                                                                                                                                                                                                                                      .pagination a, .pagination span { padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; border: 1px solid var(--border); color: #374151; transition: background .15s, color .15s; }
                                                                                                                                                                                                                                                                      .pagination a:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
                                                                                                                                                                                                                                                                      .pagination .pg-current { background: var(--primary); color: #fff; border-color: var(--primary); }

                                                                                                                                                                                                                                                                      /* ── Responsive ────────────────────────────────────────────── */
                                                                                                                                                                                                                                                                      @media (max-width: 1100px) {
                                                                                                                                                                                                                                                                          .nav-links, .search-form, .btn-signin { display: none; }
                                                                                                                                                                                                                                                                              .menu-toggle { display: block; }
                                                                                                                                                                                                                                                                                  .footer-grid { grid-template-columns: 1fr 1fr; }
                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                  @media (max-width: 600px) {
                                                                                                                                                                                                                                                                                      .footer-grid { grid-template-columns: 1fr; }
                                                                                                                                                                                                                                                                                          .post-grid   { grid-template-columns: 1fr; }
                                                                                                                                                                                                                                                                                              .page-header h1 { font-size: 1.4rem; }
                                                                                                                                                                                                                                                                                              }