/* ==========================================
   LIBRARY ARTICLES HUB STYLING
   ========================================== */

.library-intro {
    font-size: 1.1rem;
    color: var(--text-secondary, #5a6b7c);
    margin-bottom: 40px;
}

/* The Main Library Layout System */
.library-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default 1 column for mobile screens */
    gap: 25px;
    margin-bottom: 60px;
}

/* Individual Topic Folders */
.library-folder {
    background-color: #ffffff;
    border: 1px solid var(--border-color, #e8e2d5);
    border-top: 4px solid var(--primary-blue, #1a365d); /* Deep trust anchoring bar */
    border-radius: 6px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
    transition: all 0.2s ease-in-out;
}

/* Folder Glow / Lift Animation */
.library-folder:hover {
    transform: translateY(-3px);
    border-top-color: var(--accent-gold, #c59b4e); /* Swaps top bar color on hover */
    box-shadow: 0 10px 25px rgba(197, 155, 78, 0.08);
}

/* Inline Folder Title Headers Layout */
.folder-header {
    border-bottom: 1px solid var(--border-color, #e8e2d5);
    padding-bottom: 12px;
    margin-bottom: 18px;
}

.folder-header h3 {
    font-family: "Georgia", serif;
    color: var(--primary-blue, #1a365d);
    font-size: 1.25rem;
    margin: 0 !important;
    
    display: flex;
    align-items: center; /* Aligns the icon perfectly with character baselines */
    gap: 10px;           /* Clean horizontal whitespace gap */
}

/* Inline Icon Sizing */
.folder-header h3 span {
    font-size: 1.4rem;  
    flex-shrink: 0;     /* Keeps icons from distorting on tight layouts */
}

/* Clean Article Hyperlink Lists */
.article-links {
    list-style: none; /* Strips browser dots */
    padding: 0;
    margin: 0;
}

.article-links li {
    margin-bottom: 12px;
    padding-left: 15px;
    position: relative;
}

/* Premium Custom Bullet Arrow Points */
.article-links li::before {
    content: "›";
    position: absolute;
    left: 0;
    top: -2px;
    color: var(--accent-gold, #c59b4e);
    font-size: 1.2rem;
    font-weight: bold;
}

/* Text link layout values */
.article-links a {
    color: var(--text-dark, #233142);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.15s ease;
    line-height: 1.4;
    display: inline-block;
}

.article-links a:hover {
    color: var(--primary-blue, #1a365d);
    text-decoration: underline;
}
       /* LIBRARY DRAWERS GRID INTERFACE */
        .drawers-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
            text-align: left;
margin-top: 40px;
        }

        @media (min-width: 768px) {
            .drawers-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (min-width: 1024px) {
            .drawers-grid {
                grid-template-columns: 1fr 1fr 1fr;
            }
        }

        .drawer-card {
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            border-top: 4px solid var(--primary-blue);
            border-radius: 6px;
            padding: 40px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
            transition: all 0.25s ease;
            text-decoration: none;
            color: inherit;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .drawer-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 25px rgba(197, 155, 78, 0.1);
            border-top-color: var(--accent-gold);
        }

        .drawer-heading {
            font-family: "Georgia", serif;
            font-size: 1.35rem;
            color: var(--primary-blue);
            margin-bottom: 12px;
            font-weight: normal;
        }

        .drawer-card:hover .drawer-heading {
            color: var(--accent-gold);
        }

        .drawer-description {
            font-size: 0.95rem;
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .drawer-action {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--accent-gold);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: auto;
        }
/* RESPONSIVE DESKTOP SWITCHES FOR THE LIBRARY FOLDERS */
@media (min-width: 768px) and (max-width: 1023px) {
    .library-grid {
        grid-template-columns: 1fr 1fr; /* 2 columns on tablets */
    }
}

@media (min-width: 1024px) {
    .library-grid {
        grid-template-columns: 1fr 1fr 1fr; /* Perfect 3-column row matrix on desktops */
    }
}
/* --- FIX FOR QUICK-JUMP PORTAL ON IPHONE --- */

.button-jump-grid {
  display: flex;
  flex-wrap: wrap;       /* Allows buttons to gracefully drop to a new line on iPhone */
  gap: 10px;             /* Clean space between buttons */
  justify-content: center; /* Keeps the buttons centered on screen, not slammed left */
  padding: 10px;
  width: 100%;
}

/* Force iPhone to display the buttons cleanly as defined clickable boxes */
.jump-btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95rem;
  border: 2px solid #ccc; /* Ensures the physical box boundary is clearly visible */
  text-align: center;
  min-width: 110px;      /* Stops buttons from collapsing flat */
  box-sizing: border-box; /* Forces padding to stay nicely inside the box boundaries */
}


/* --- THEMATIC BACKGROUND COLOR MATCHES --- */

/* 1. BASICS: Pure White Match */
.btn-b-basics {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border-color: #dddddd !important;
}
.bin-basics {
  background-color: #ffffff !important;
}

/* 2. CULTS: Soft Warning Red Match */
.btn-b-cults {
  background-color: #ffebee !important;
  color: #c62828 !important;
  border-color: #ffcdd2 !important;
}
.bin-cults {
  background-color: #ffebee !important;
}

/* 3. TIMELINES: Vintage Parchment Match */
.btn-b-timelines {
  background-color: #fdf6e2 !important;
  color: #856404 !important;
  border-color: #fbeecc !important;
}
.bin-timelines {
  background-color: #fdf6e2 !important;
}

/* 4. ERRORS: Alert Orange Match */
.btn-b-errors {
  background-color: #fff3e0 !important;
  color: #e65100 !important;
  border-color: #ffe0b2 !important;
}
.bin-errors {
  background-color: #fff3e0 !important;
}

/* 5. RESOURCES: Utility Grey/Blue Match */
.btn-b-resources {
  background-color: #e0f2f1 !important;
  color: #004d40 !important;
  border-color: #b2dfdb !important;
}
.bin-resources {
  background-color: #e0f2f1 !important;
}

/* 6. MISC: Cool Light Slate Match */
.btn-b-misc {
  background-color: #eceff1 !important;
  color: #37474f !important;
  border-color: #cfd8dc !important;
}
.bin-misc {
  background-color: #eceff1 !important;
}