/* css/link-fix.css */

/* Styling for standalone "more-link" if used elsewhere,
   distinct from the new .cta-button style.
   The .cta-button class in styles.css should be preferred for prominent CTAs.
*/
.more-link {
    /* Reset some properties to ensure a clean slate if styles conflict */
    background-color: transparent;
    border: none;
    padding: 0; /* Minimal padding for a text link */
    
    /* Apply desired styles for a text-based "more" link */
    display: inline-block; /* Or inline, depending on desired layout */
    font-family: var(--font-primary, 'Exo', sans-serif);
    font-size: 0.9rem; /* Consistent with other small text/links */
    font-weight: 600; /* Semi-bold to stand out a bit */
    margin-top: var(--spacing-sm, 1rem); /* Consistent spacing unit */
    color: var(--color-accent, #B08D57); /* Use the defined accent color */
    text-decoration: underline; /* Standard for text links */
    cursor: pointer;
    transition: color var(--transition-speed, 0.3s) ease, opacity var(--transition-speed, 0.3s) ease;
}

/* Style hover and focus state for better interactivity */
.more-link:hover,
.more-link:focus {
    color: var(--color-accent-darker, #8c7045); /* Darken on hover/focus */
    opacity: 0.85; /* Slight opacity change for feedback */
    text-decoration: underline; /* Ensure underline remains */
}

/* Ensure .cta-button styles from styles.css take precedence if both classes were accidentally applied */
.cta-button.more-link {
    /* Re-assert key .cta-button properties if needed, but ideally, use one class or the other */
    background-color: var(--color-accent); /* from styles.css */
    color: var(--color-text-light); /* from styles.css */
    padding: var(--spacing-sm) var(--spacing-lg); /* from styles.css */
    text-decoration: none; /* from styles.css */
    /* Add other .cta-button properties here if override is a concern */
}