/* Custom CSS Stylesheet for Flynn Foods */

/* Define Pantone-inspired colors as CSS variables */
:root {
    --color-rubine-red: #E0005E; /* Approximate for Rubine Red U */
    --color-130u: #FFC72C;       /* Approximate for 130U */
    --color-7506u: #F0E6D2;       /* Approximate for 7506U */
    --color-291u: #66CCFF;       /* Approximate for 291U */
    --color-2765u: #00004C;       /* Approximate for 2765U */
    --color-process-black: #000000; /* Process Black U */
    --color-white: #FFFFFF;      /* White U */
}

/* Base Body Styles */
body {
    font-family: 'Candara', sans-serif; /* Body font */
    background-color: var(--color-white); /* White U background */
    color: #333; /* Default text color, can be overridden */
}

/* General Link and Hover States */
a {
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* Custom classes for fonts based on user request */
/* Splash font (for Hero H1) - Using Dancing Script as a substitute for Mackless Script */
/* If you have Mackless Script font files, you would use @font-face rule here */
@font-face {
    font-family: 'Mackless Script';
    src: url('FLYNN-FONTS/Mackless Script.ttf') format('truetype');
}
.splash-font {
    font-family: 'Mackless Script', cursive;
}

    


/* Titling font (for H2, H3) - Using Montserrat as a substitute for Avenir Next LT Pro */
/* If you have Avenir Next LT Pro font files, you would use @font-face rule here */
@font-face {
    font-family: 'Avenir Next LT Pro';
    src: url('FLYNN-FONTS/AvenirNextLTPro-Regular.otf');
}
.titling-font {
    font-family: 'Avenir Next LT Pro', sans-serif;
}

/* Custom button styling */
.btn-primary {
    background-color: var(--color-rubine-red);
    color: var(--color-white);
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
    transition: background-color 0.3s ease-in-out;
    display: inline-block; /* Ensure padding works correctly */
    text-decoration: none; /* Remove underline from links acting as buttons */
}

.btn-primary:hover {
    background-color: var(--color-2765u); /* Darker blue on hover for contrast */
}

/* Hero Section Background Gradient */
.hero-section {
    background: linear-gradient(to right, var(--color-7506u), var(--color-291u)); /* Gradient using secondary colors */
}

/* Contact Section Background Gradient */
.contact-section {
    background: linear-gradient(to right, var(--color-291u), var(--color-7506u)); /* Gradient using secondary colors */
}

/* Custom text colors based on Pantone scheme */
.text-primary-red {
    color: var(--color-rubine-red);
}

.text-secondary-yellow {
    color: var(--color-130u);
}

.text-secondary-beige {
    color: var(--color-7506u);
}

.text-secondary-blue {
    color: var(--color-291u);
}

.text-dark-blue {
    color: var(--color-2765u);
}

.bg-black {
    background-color: var(--color-process-black); /* Process Black U for footer */
}

/* Ensure images are responsive and have rounded corners */
img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem; /* rounded-xl */
}

/* Tailwind's default text-gray-700 is used for body text, which is fine,
   but you can override specific elements with custom colors if needed. */

/* Styles for auto-hiding navbar */
nav {
    transition: transform 0.3s ease-in-out;
}

.navbar-hidden {
    transform: translateY(-100%);
}