/* 
  Custom 'link in bio' page coded by Reef Salter, © 2025. All code is original and protected by copyright.
  Logos and images belong to their respective owners and are used with permission or under applicable rights.
  Please do not copy, reuse, or redistribute this code without explicit permission.
  */



@font-face {
    font-family: 'Gill Sans Nova';
    src: url('path-to-your-fonts/GillSansNova-Book.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gill Sans Nova';
    src: url('path-to-your-fonts/GillSansNova-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gill Sans Nova';
    src: url('path-to-your-fonts/GillSansNova-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gill Sans Nova';
    src: url('path-to-your-fonts/GillSansNova-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tablet Gothic';
    src: url('/fonts/Tablet\ Gothic\ W02\ SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tablet Gothic';
    src: url('/fonts/Tablet\ Gothic\ W04\ ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --lime-green: #BBD040;
    --magenta: #E6007E;
    --dark-grey: #5B5E5F;
    --medium-grey: #88888D;
    --light-grey: #DDDDDD;
    
    /* Font stacks with fallbacks */
    --headline-font: 'Gill Sans Nova', 'Gill Sans MT', sans-serif;
    --body-font: 'Gill Sans Nova', 'Gill Sans MT', sans-serif;
    --button-font: 'Tablet Gothic', 'Source Sans Pro', sans-serif;
}

body {
    font-family: var(--body-font);
    font-weight: 400; /* Book weight */
    background-color: #f8f9fa;
    color: var(--dark-grey);
    line-height: 1.6;
}

.container {
    max-width: 600px;
    padding: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 20px;
    overflow: hidden;
    background-color: white;
    margin: 30px auto;
}

.header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid var(--lime-green);
}

.header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23bbd040' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.5;
    z-index: 0;
}

.logo-container {
    position: relative;
    z-index: 1;
}

.logo {
    max-width: 85%;
    height: auto;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

.tagline {
    margin-top: 15px;
    font-size: 16px;
    color: var(--medium-grey);
    font-weight: 500; /* Medium weight */
    font-family: var(--body-font);
}

.content-section {
    padding: 30px;
}

.services-title {
    text-align: center;
    margin-bottom: 30px;
    color: var(--dark-grey);
    font-weight: 700; /* Bold weight */
    font-size: 28px;
    position: relative;
    padding-bottom: 15px;
    font-family: var(--headline-font);
}

.services-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--magenta);
    border-radius: 3px;
}

.service-item {
    text-align: center;
    margin-bottom: 30px;
    transition: transform 0.2s ease;
}

.service-item:hover {
    transform: translateY(-5px);
}

.service-link {
    text-decoration: none;
    color: var(--dark-grey);
    display: block;
}

.service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
    transition: transform 0.2s ease;
}

.service-link:hover .service-icon {
    transform: scale(1.05);
}

.service-name {
    font-size: 15px;
    color: var(--dark-grey);
    font-weight: 500; /* Medium weight */
    font-family: var(--body-font);
}

.section-title {
    text-align: center;
    margin: 40px 0 25px;
    color: var(--dark-grey);
    font-weight: 600; /* Semi-bold weight */
    font-size: 22px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--headline-font);
}

.section-title::before,
.section-title::after {
    content: "";
    height: 2px;
    background-color: var(--light-grey);
    flex: 1;
    margin: 0 15px;
}

/* Button styles with brand fonts */
.link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: var(--dark-grey);
    padding: 16px;
    margin-bottom: 15px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600; /* Semi-bold weight */
    transition: all 0.2s ease;
    border: 2px solid var(--lime-green);
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    text-align: center;
    font-family: var(--button-font);
    letter-spacing: 0.02em;
}

.link-button:hover {
    background-color: var(--lime-green);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.social-button {
    border: 2px solid var(--magenta);
}

.social-button:hover {
    background-color: var(--magenta);
}

.review-button {
    border: 2px solid var(--medium-grey);
}

.review-button:hover {
    background-color: var(--medium-grey);
}

.useful-button {
    border: 2px solid var(--magenta);
    border-left: 6px solid var(--magenta);
}

.useful-button:hover {
    background-color: var(--magenta);
}

/* Fixed badge positioning to top right */
.badge-container {
    position: absolute;
    top: -10px;
    right: 10px;
    z-index: 3;
}

.badge-label {
    display: inline-block;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 800; /* Extra Bold weight */
    border-radius: 20px;
    color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    white-space: nowrap;
    font-family: var(--button-font);
}

.badge-popular {
    background-color: var(--magenta);
}

.badge-new {
    background-color: var(--lime-green);
}

.footer {
    text-align: center;
    padding: 30px;
    background-color: #f8f9fa;
    color: var(--medium-grey);
    font-size: 13px;
    border-top: 1px solid var(--light-grey);
    font-family: var(--body-font);
    font-weight: 300; /* Light weight */
}

.footer a {
    color: var(--magenta);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: var(--lime-green);
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .container {
        margin: 15px auto;
        border-radius: 15px;
        width: 90%;
    }
    
    .header {
        padding: 30px 15px;
    }
    
    .content-section {
        padding: 20px 15px;
    }
    
    .service-icon {
        width: 65px;
        height: 65px;
    }
    
    .link-button {
        padding: 14px 10px;
        font-size: 14px;
    }
    
    .badge-label {
        padding: 3px 10px;
        font-size: 10px;
    }
    
    .section-title {
        font-size: 20px;
        margin: 30px 0 20px;
    }
    
    .services-title {
        font-size: 24px;
    }
    
    /* Ensure badges are visible on mobile */
    .badge-container {
        top: -8px;
        right: 8px;
    }
}