/**
 * Bookmark Template Page Styles
 * 
 * Styles for the bookmark collection page template.
 * Externalized from templates/bookmark-template.php for dynamic caching.
 * 
 * @since 9.8.2
 */

/* Main Container */
.hd-bookmark-container {
--hd-bookmark-accent: var(--hd-bookmark-color, #e11d48);
--hd-bookmark-border: rgba(226, 232, 240, 0.92);
--hd-bookmark-ink: #0f172a;
--hd-bookmark-muted: #64748b;
--hd-bookmark-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
max-width: 1200px;
margin: 0 auto;
padding: 28px 20px 56px;
}

/* Help Section */
.hd-bookmark-help {
margin-top: 60px;
margin-bottom: 0;
padding: 34px 28px;
border: 1px solid var(--hd-bookmark-border, rgba(226, 232, 240, 0.9));
border-radius: 26px;
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
box-shadow: var(--hd-bookmark-shadow, 0 20px 40px rgba(15, 23, 42, 0.06));
}

.hd-bookmark-help h2 {
text-align: center;
font-size: clamp(1.45rem, 1.2rem + 0.6vw, 1.9rem);
margin-bottom: 30px;
letter-spacing: -0.02em;
color: var(--hd-bookmark-ink, #0f172a);
}

/* Help Grid */
.hd-bookmark-help-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 24px;
margin-bottom: 30px;
}

.hd-bookmark-help-item {
text-align: center;
padding: 22px 18px;
background: linear-gradient(180deg, rgba(248,250,252,0.98), rgba(255,255,255,0.96));
border: 1px solid var(--hd-bookmark-border, rgba(226, 232, 240, 0.92));
border-radius: 18px;
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.hd-bookmark-help-item:hover {
border-color: rgba(225, 29, 72, 0.18);
box-shadow: 0 18px 32px rgba(15, 23, 42, 0.08);
transform: translateY(-2px);
}

.hd-bookmark-help-step {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48));
color: #fff;
font-size: 18px;
font-weight: bold;
border-radius: 50%;
margin-bottom: 12px;
}

.hd-bookmark-help-item h3 {
font-size: 1.1rem;
margin-bottom: 8px;
color: var(--hd-bookmark-ink, #0f172a);
}

.hd-bookmark-help-item p {
font-size: 14px;
color: var(--hd-bookmark-muted, #64748b);
margin: 0;
}

/* Notice Box */
.hd-bookmark-notice {
background: linear-gradient(180deg, rgba(255, 247, 237, 0.96), rgba(254, 243, 199, 0.92));
padding: 16px 18px;
border-radius: 14px;
border: 1px solid rgba(245, 158, 11, 0.2);
font-size: 14px;
line-height: 1.7;
color: #92400e;
}

.hd-bookmark-notice-label {
display: inline-flex;
margin-right: 0.25rem;
color: #78350f;
}

@media (max-width: 767px) {
.hd-bookmark-container {
padding: 20px 14px 40px;
}

.hd-bookmark-help {
margin-top: 36px;
padding: 24px 16px;
border-radius: 20px;
}

.hd-bookmark-help-grid {
gap: 16px;
}
}

@media (prefers-reduced-motion: reduce) {
.hd-bookmark-help-item {
transition: none;
}

.hd-bookmark-help-item:hover {
transform: none;
}
}