/*
Theme Name: Babes Nailhouse Custom Theme
Theme URI: http://dev.babes-thenailhouse.com/
Author: ChatGPT
Author URI: https://openai.com
Description: A custom WordPress theme inspired by the Babes Nailhouse service list design.  The theme uses bold colours, pill‑shaped headings and card layouts to present services in a fun and modern way.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: babes-nailhouse-theme
*/

/* Root variables help keep the colour palette consistent throughout the theme. */
:root {
    --colour-primary: #3d2d58;    /* deep purple background */
    --colour-secondary: #74604d;  /* muted green for headings */
    --colour-accent: #c97a86;    /* dusty pink accent */
    --colour-light: #f7f2ea;     /* light beige for cards */
    --colour-text: #2e1f34;      /* dark text for cards */
    --colour-card-top: #f3cde4;   /* pale pink used for the top half of cards */
    --colour-card-bottom: #ffffff;/* off‑white bottom portion of cards */
    --colour-price: #d8a280;      /* gold tone for prices */
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    color: var(--colour-light);
    /* Apply the leopard print across the entire site */
    background-image: url("assets/leopard-background.png");
    background-repeat: repeat;
    background-size: 300px 300px;
    /* Remove the underlying dark colour so the pattern shows everywhere */
    background-color: transparent;
}

a {
    color: var(--colour-accent);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

header.site-header {
    padding: 20px 20px;
    text-align: center;
    /* Use a semi‑transparent backdrop so the logo remains readable on the patterned background */    background-color: rgba(61, 45, 88, 0.35);5);
    backdrop-filter: blur(1px);
}

.site-title {
    margin: 0;
    font-size: 2rem;
    color: var(--colour-accent);
}

footer.site-footer {
    padding: 20px;
    text-align: center;
    background-color: rgba(61, 45, 88, 0.8);
    backdrop-filter: blur(2px);
    color: var(--colour-light);
}

/* Section headings resemble the pill shapes seen in the provided mock‑up. */
.section-heading {
    display: inline-block;
    background-color: var(--colour-secondary);
    color: var(--colour-light);
    padding: 8px 24px;
    border-radius: 24px;
    font-weight: bold;
    margin-bottom: 32px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Generic wrapper to control the width and centre align content. */
.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Card grid used for lists of services. */
.card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Individual card styling. */
.service-card {
    background-color: var(--colour-light);
    color: var(--colour-text);
    width: 220px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* The top portion of each card is a block of colour reminiscent of the mock‑up. */
.service-card .card-top {
    background-color: var(--colour-card-top);
    height: 180px;
}

/* The bottom portion contains the service name and price. */
.service-card .card-bottom {
    background-color: var(--colour-card-bottom);
    padding: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top: 2px solid transparent;
}

.service-card .service-title {
    font-weight: bold;
    margin: 0 0 8px;
}

.service-card .service-price {
    font-size: 1.2rem;
    color: var(--colour-price);
    margin: 0;
}

/* Layout for nail art level details section. */
/*
 * The level section at the bottom uses a leopard print background to mirror
 * the original mock‑up. The background image resides in the assets folder and
 * will repeat to fill the section. Colours are adjusted to contrast with the
 * patterned backdrop.
 */
.level-section {
    /* Centre the content and allow it to stack nicely on mobile */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: 80px 20px;
    color: var(--colour-light);
    /* Use a translucent overlay to improve readability on the patterned background */
    background-color: rgba(61, 45, 88, 0.7);

.level-section .level-image {
    flex: 1 1 300px;
}
.level-section .level-image img {
    width: 100%;
    border-radius: 16px;
}

.level-section .level-content {
    flex: 1 1 300px;
    max-width: 500px;
}

.level-section h2 {
    margin-top: 0;
    font-size: 2rem;
    margin-bottom: 16px;
}

.level-section ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 20px;
}

.btn-primary {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--colour-accent);
    color: var(--colour-light);
    border-radius: 24px;
    text-transform: uppercase;
    font-weight: bold;
}
.btn-primary:hover {
    background-color: var(--colour-secondary);
    color: var(--colour-light);
}
	
/* Ensure the custom logo (banner) scales nicely on all devices */
.custom-logo {
    max-width: 600px;
    width: 80%;
    height: auto;
	    max-height: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}