/* ============================================
   HUNA.NET COURSE PAGES STYLESHEET
   Created: January 2026
   Purpose: Styling for course/product pages
   ============================================ */

/* Base Styles */
body {
   margin: 0;
   padding: 20px;
   background-color: #e6ffcc;
   font-family: Arial, sans-serif;
   line-height: 1.6;
}

/* Container */
.container {
   max-width: 600px;
   margin: 0 auto;
   background-color: #ffffcc;
   border: 5px solid #cc6600;
}

/* Header */
.header {
   background-color: #ffffcc;
   padding: 20px;
   text-align: center;
   border-bottom: 5px solid #cc6600;
}

.header h1 {
   color: #cc6600;
   font-size: 2.5em;
   margin: 0 0 10px 0;
}

.header h2 {
   color: #cc6600;
   font-size: 1.5em;
   margin: 0;
   font-weight: normal;
}

/* Content Layout */
.content-wrapper {
   display: flex;
   background-color: #ffffcc;
}

/* Sidebar */
.sidebar {
   width: 100px;
   padding: 20px;
   background-color: #ffffcc;
   border-right: 5px solid #cc6600;
}

/* Navigation */
nav a {
   display: block;
   margin-bottom: 10px;
   color: green;
   text-decoration: none;
}

nav a:hover {
   text-decoration: underline;
}

/* Main Content */
.main-content {
   flex: 1;
   padding: 20px;
   background-color: #ffffcc;
}

.main-content h3 {
   color: #cc6600;
   margin-top: 20px;
   margin-bottom: 10px;
}

/* Order Box */
.order-box {
   background-color: #fff9e6;
   border: 2px solid #cc6600;
   padding: 15px;
   margin: 20px 0;
   border-radius: 5px;
}

.order-box p {
   margin: 10px 0;
   font-weight: bold;
}

.order-box a {
   color: green;
}

/* Lists */
ul {
   line-height: 2;
}

/* Links */
a {
   color: green;
}

a:hover {
   text-decoration: underline;
}

/* External Link Indicator */
sup {
   font-size: 0.7em;
}

/* Mobile Responsive */
@media (max-width: 650px) {
   body {
      padding: 10px;
   }
   
   .content-wrapper {
      flex-direction: column;
   }
   
   .sidebar {
      width: auto;
      border-right: none;
      border-bottom: 5px solid #cc6600;
   }
   
   .header h1 {
      font-size: 1.8em;
   }
   
   .header h2 {
      font-size: 1.2em;
   }
}