/* Global Variables */
/* Changing these viriables will change a lot of things across Canvas, but NOT the main site colors. */
:root {
    --icls-brand-primary: #174497;                  /* Brand blue color */
    --icls-brand-primary-dark: #0d366e;             /* Darker brand blue for hover states */
    --icls-brand-secondary: #F97552;              /* Accent orange color */
    --icls-brand-secondary-dark: #d66a3e;         /* Darker orange for hover states */
    --border-color: #e8eaec;                 /* Light border color */
    --text-dark: #333;                         /* Dark text color for headings */
    --text-medium: #555;                       /* Medium gray text color for body */
    --text-light: #777;                          /* Light gray text color */
    --text-muted: #999;                       /* Muted text color for less emphasis */
}

/* ### GENERAL COURSE CSS ### */
/* Buttons */
.icls-button {
    padding: 12px 24px;
    background-color: var(--icls-brand-primary);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.icls-button:hover {
    background-color: var(--icls-brand-primary-dark);
    text-decoration: underline;
}

.icls-button--alt {
    background-color: var(--icls-brand-secondary);
}

.icls-button--alt:hover {
    background-color: var(--icls-brand-secondary-dark);
    text-decoration: underline;
}

/* #### HOME PAGE CSS #### */
/* Container */
.icls-course-home-container {
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 1.6;
  }

/* Banner */
.icls-course-home-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.icls-course-home-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* Title */
.icls-course-home-title {
    text-align: center;
}

.icls-course-home-title h1 {
    font-size:36px; 
    font-weight:700; 
    color:var(--icls-brand-primary); 
    margin:20px 0;
}

/* Navigation */
.icls-course-home-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 30px 20px;
}

.icls-course-home-nav a {
    padding: 12px 24px;
    background-color: var(--icls-brand-primary);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.icls-course-home-nav a:hover {
    background-color: var(--icls-brand-secondary);
    text-decoration: underline;
    color: #fff;
}

  /* Description */
  .icls-course-home-description {
    padding: 30px 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
.icls-course-home-description h2 {
    margin: 0;
    padding: 12px 20px;
    background: var(--icls-brand-primary);
    font-size: 28px;
    font-weight: 600;
    border-left: 6px solid var(--icls-brand-secondary);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #fff;
}
.icls-course-home-description-body {
    padding: 20px;
    border: 1px solid #d3dae2;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

  /* Grid container */
.icls-course-home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
 }

  /* Card base */
.icls-course-home-card {
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #d3dae2;
}
  .icls-course-home-card--alt {
    background: #f9faff;
  }
  .icls-course-home-card h2 {
    margin: 0;
    background: var(--icls-brand-primary);
    color: #fff;
    padding: 15px 20px;
    font-size: 20px;
    font-weight: 600;
    border-left: 6px solid var(--icls-brand-secondary);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  .icls-course-home-card-body {
    padding: 20px;
  }

  /* Full-width cards */
  .icls-course-home-card--full {
    grid-column: 1 / -1;
  }

  /* List in card */
  .icls-course-home-list {
    margin: 0;
    padding-left: 20px;
  }

  /* Footer */
  .icls-course-home-footer {
    padding: 10px;
    text-align: center;
    font-size: 13px;
    color: #888;
  }
  .icls-course-home-footer .icls-course-home-footer-brand {
    margin-bottom: 8px;
  }

/* ### BOOKSHELF CSS ### */
/* Styles for the ICLS Bookclub bookshelf layout. Responsive grid of book cards. */

/* Container for the entire bookshelf */
.bookshelf-container {
    display: grid;                            /* Use CSS Grid for flexible layout */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* Responsive columns */
    gap: 16px;                                /* Space between cards */
    padding: 16px;                            /* Inner spacing around grid */
}

/* Individual book cards */
.bookshelf-card {
    background-color: #fff;                 
    border-radius: 4px;                       
    overflow: hidden;                         /* Clip overflowing content */
    display: flex;                            /* Flex layout for header, image, info */
    flex-direction: column;                   /* Stack children vertically */
    border: 1px solid var(--border-color);    /* Light border around card */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Header section: displays term/season label */
.bookshelf-header {
    background-color: var(--icls-brand-primary);                /* Brand blue background */
    color: #fff;                              /* White text */
    font-size: 14px;                          /* Small text size */
    padding: 4px 8px;                         /* Vertical/horizontal padding */
    border-bottom: 3px solid var(--icls-brand-secondary);        /* Accent orange bottom border */
    text-align: center;                       /* Center the label */
}

/* Container for the book cover image */
.bookshelf-image {
    height: 65%;                              /* Occupy 65% of card height */
    overflow: hidden;                         /* Hide overflow when scaling */
    position: relative;                       /* Position context for image */
}

.bookshelf-image img {
    display: block;                           /* Remove inline gap */
    width: 100%;                              /* Full width scaling */
}

/* Container for book metadata: title, author, etc. */
.bookshelf-info-container {
    padding: 12px;                            /* Inner spacing */
    display: flex;                            /* Flex for vertical distribution */
    flex-direction: column;                   /* Stack metadata */
    flex-grow: 1;                             /* Fill remaining card height */
}

/* Book title styling */
.bookshelf-book-title {
    font-size: 18px;                          /* Larger heading size */
    margin: 0 0 8px;                          /* Bottom spacing */
    color: var(--text-dark);                              /* Dark text for readability */
}

/* Book author styling */
.bookshelf-author {
    font-size: 14px;                          /* Slightly smaller text */
    font-style: italic;                       /* Italic for author names */
    color: var(--text-medium);                              /* Medium-gray text */
    margin: 0 0 12px;                         /* Spacing below author */
}

/* Additional info: published year, ISBN */
.bookshelf-other-info {
    font-size: 12px;                          /* Smaller informational text */
    color: var(--text-light);                              /* Lighter-gray color */
    margin-top: auto;                         /* Push to bottom of info container */
    line-height: 1.4;                         /* Improve readability */
}

/* Container for action buttons */
.bookshelf-button-container {
    margin-top: 12px;                         /* Space above buttons */
}

/* Primary action button (Amazon link) */
.bookshelf-button-primary {
    display: inline-block;                    /* Allow margin, padding */
    margin-right: 8px;                        /* Spacing between buttons */
    margin-bottom: 8px;                       /* Wrap spacing */
    padding: 6px 12px;                        /* Clickable area */
    background-color: var(--icls-brand-primary);                /* Brand blue */
    color: #fff;                              /* White text */
    text-decoration: none;                    /* Remove underline */
    border-radius: 4px;                       /* Slight rounding */
    font-size: 13px;                          /* Button text size */
}

/* Hover state for primary button */
.bookshelf-button-primary:hover {
    background-color: var(--icls-brand-primary-dark);                /* Darker blue on hover */
    color: #fff;                              /* Keep text white */
}

/* Visited state for primary button link */
.bookshelf-button-primary:visited {
    color: #fff;                              /* Maintain white color */
}

/* Secondary action button (Publisher link) */
.bookshelf-button-secondary {
    display: inline-block;                    /* Allow margin, padding */
    margin-right: 8px;                        /* Spacing between buttons */
    margin-bottom: 8px;                       /* Wrap spacing */
    padding: 6px 12px;                        /* Clickable area */
    background-color: var(--icls-brand-secondary);                /* Accent orange */
    color: #fff;                              /* White text */
    text-decoration: none;                    /* Remove underline */
    border-radius: 4px;                       /* Slight rounding */
    font-size: 13px;                          /* Button text size */
}

/* Hover state for secondary button */
.bookshelf-button-secondary:hover {
    background-color: var(--icls-brand-secondary-dark);                /* Darker orange on hover */
    color: #fff;                              /* Keep text white */
}

/* Visited state for secondary button link */
.bookshelf-button-secondary:visited {
    color: #fff;                              /* Maintain white color */
}

/* EduFrame Link on Login Page */
.eduframe_login_link {
    text-align: center;
}