/* CSS for Ticket Concierge website */

/* Root variables for color palette */
:root {
    /*
      Updated colour palette inspired by classic cartoon posters and the
      popcorn illustration provided by the client.  A playful pastel
      blue pairs with a warm red for a vintage feel.  Crisp whites keep
      the layout bright, while a dark neutral provides contrast for
      body text.
    */
    /*
      Refresh the colour palette to better match the vintage popcorn
      illustration provided by the client.  A brighter red and an
      airier pastel blue complement crisp whites.  A deep charcoal
      provides contrast for text.  The font family is updated to a
      friendlier sans‑serif that pairs well with the playful design.
    */
    --red: #e84a5f;
    --blue: #cbe6f6;
    --white: #ffffff;
    --dark: #2b2d42;
    --font-family: 'Trebuchet MS', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Global styles */
body {
    margin: 0;
    font-family: var(--font-family);
    color: var(--dark);
    background-color: var(--white);
    line-height: 1.6;
    scroll-behavior: smooth;
}

/*
  Scroll‑triggered fade‑in animations

  Elements with the ``fade-in`` class will be hidden initially and will
  smoothly slide up and fade into view when they intersect the viewport.
  The JavaScript in ``script.js`` uses the IntersectionObserver API to
  toggle the ``in-view`` modifier class when an element is scrolled into
  view.  You can apply ``fade-in`` to any element in ``index.html`` to
  achieve this effect.
*/
.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.in-view {
    opacity: 1;
    transform: translateY(0);
}

a {
    color: var(--red);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Container for consistent spacing */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 0;
}

/* Flex utilities */
.flex-row {
    display: flex;
    flex-direction: row;
}
.align-center {
    align-items: center;
}
.space-between {
    justify-content: space-between;
}

/* Header styling */
.header {
    /* Use the pastel blue for the site header to tie in with the hero. */
    background-color: var(--blue);
    color: var(--dark);
    padding: 0.5rem 0;
}

.branding {
    display: flex;
    align-items: center;
}

.ticket-icon {
    margin-right: 0.5rem;
    /* Use the dark neutral for any inline icons to match the new palette */
    color: var(--dark);
    vertical-align: middle;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: bold;
}

.navigation {
    display: flex;
    align-items: center;
}

.nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list li {
    margin-left: 1.5rem;
}

.nav-list li a {
    /* Dark links on the pastel blue header for good contrast */
    color: var(--dark);
    font-weight: 600;
    transition: color 0.2s ease-in-out;
}

.nav-list li a:hover {
    /* Hover state uses the red accent colour */
    color: var(--red);
}

/* Hero section styling */
/* Hero section styling */
.hero {
    position: relative;
    /* Use the pastel blue for the hero background.  Text is dark for
       contrast and readability. */
    background-color: var(--blue);
    color: var(--dark);
    padding: 5rem 0;
    text-align: center;
}

/* Layout container inside hero for tickets and text.  Uses flexbox to
   position the ticket illustration to the left of the logo and text. */
.hero-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-wrap: nowrap;
}

/* Container for the stack of tickets. */
.hero-tickets img {
    width: 280px;
    max-width: 100%;
    height: auto;
}

/* Illustration of the man offering tickets.  Position this on the right side of
   the hero alongside the text and ticket stack.  The image scales
   responsively and is hidden on narrow screens for a cleaner mobile
   layout. */
.hero-man img {
    width: 380px;
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .hero-man {
        display: none;
    }
}

/* Wrap the logo, subtitle and button in its own container for
   alignment. */
.hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

@media (max-width: 768px) {
    .hero-inner {
        flex-direction: column;
        gap: 1.5rem;
    }
    .hero-tickets {
        /* Hide the tickets on smaller screens to save space */
        display: none;
    }
}

/*
  Add a faint, oversized watermark logo behind the hero content.  The
  text uses the company name and is rendered with very low opacity so
  that it does not compete with the foreground elements.  Because the
  hero section is ``position: relative``, this pseudo‑element can be
  positioned absolutely within it.  Pointer events are disabled so
  clicking through to the underlying button still works.
*/
/* Remove the large watermark since the company name is now displayed prominently */
.hero::after {
    content: '';
}

/* Card containing the company name on the hero */
.logo-card {
    display: inline-block;
    background-color: var(--white);
    color: var(--dark);
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-bottom: 1rem;
    font-size: 2rem;
    font-weight: bold;
}

.hero-title {
    font-size: 2rem;
    margin: 0.25rem 0;
    color: var(--dark);
    font-weight: 600;
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    color: var(--dark);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 500;
}

/* Styling for the main company name in the hero section.  It
   appears prominently at the top of the hero and includes a ticket
   emoji. */
.company-name {
    /* Deprecated.  This rule is kept for backwards compatibility but
       is no longer used now that the hero logo is defined separately. */
    display: none;
}

/* Hero logo image.  When the client supplies a logo file we render
   it directly in the hero instead of the text based variant.  The
   logo scales responsively and is centered with appropriate
   whitespace. */
.hero-logo-img {
    display: block;
    /* Increase the logo size so it stands out more.  It now takes up
       more horizontal space while maintaining its aspect ratio. */
    width: 70%;
    max-width: 600px;
    height: auto;
    margin: 0 auto 1rem auto;
}

@media (max-width: 768px) {
    .hero-logo-img {
        width: 80%;
        max-width: 300px;
    }
}

/* Hero logo styling.  This large heading functions as the brand
   identifier and is displayed front and centre in the hero.
   Responsive typography ensures it scales gracefully on smaller
   screens. */
.hero-logo {
    margin: 0 0 0.5rem 0;
    font-size: 5rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* Slight letter spacing for a more playful look */
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .hero-logo {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .company-name {
        font-size: 2rem;
    }
}

/* Primary button styling */
.btn-primary {
    display: inline-block;
    background-color: var(--red);
    color: var(--white);
    padding: 0.75rem 1.75rem;
    border-radius: 0.25rem;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--dark);
    color: var(--white);
}

/*
  Custom styling for the call‑to‑action button on the hero section.  It is
  larger, more square in shape and has a cartoonish feel thanks to a
  thick border, rounded corners and a drop shadow.  Using flexbox
  centres the button text.  On hover the button lifts slightly to
  emphasise interactivity.
*/
.hero .btn-primary {
    /* Increase the height relative to the width to make the button
       closer to a square.  A generous border‑radius and drop shadow
       give a cartoonish, friendly feel. */
    /* Reduce the width further to bring the width and height closer
       together for a more square feel */
    /* Make the call‑to‑action larger and more accessible */
    width: 260px;
    height: 100px;
    padding: 0;
    border-radius: 1.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--dark);
    box-shadow: 0 8px 0 rgba(0, 0, 0, 0.2);
}

.hero .btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.25);
    background-color: var(--dark);
    color: var(--white);
}

/* About section */
.about {
    padding: 3rem 0;
    /* Use the bold red for the about section to differentiate it from
       the hero and draw attention. */
    background-color: var(--red);
    color: var(--white);
}

.about h2 {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--white);
    /* Increase the section heading size for a more playful, bold look */
    font-size: 3rem;
    /* Use a cartoonish font to echo the popcorn style */
    font-family: 'Comic Sans MS', 'Arial Black', var(--font-family);
    letter-spacing: 0.05em;
}

.about p {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    color: var(--white);
}

/* Process section */
.process {
    /* Apply the pastel blue to the process section and use dark
       typography for readability. */
    background-color: var(--blue);
    color: var(--dark);
    padding: 3rem 0;
}

.process h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--dark);
    font-size: 3rem;
    font-family: 'Comic Sans MS', 'Arial Black', var(--font-family);
    letter-spacing: 0.05em;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.process-item {
    background-color: rgba(255, 255, 255, 0.6);
    padding: 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.process-item img {
    /* Unified dimensions for process icons.  Increasing the size slightly
       and ensuring they are all square helps create a consistent look. */
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 1rem;
    /*
      Icons in the process section now have transparent backgrounds,
      so we don’t need to force a blend mode.  Keeping the default
      blend mode ensures the illustrations render crisply on top of the
      dark green panels.
    */
    /* No blend mode needed */
}

.process-item h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--red);
}

.process-item p {
    margin: 0;
    color: var(--dark);
    line-height: 1.4;
}

/* Animations and interactive effects */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content {
    position: relative;
    z-index: 1;
    animation: fadeInUp 1s ease-out forwards;
}

/* Oversized watermark text inside the hero.  This element sits
   absolutely positioned within the hero and uses very low opacity so
   it adds texture without competing with the main content. */
.hero-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8rem;
    font-weight: 800;
    letter-spacing: 0.2rem;
    /* Use a dark colour with very low opacity for a subtle effect */
    color: rgba(44, 61, 52, 0.08);
    pointer-events: none;
    white-space: nowrap;
    z-index: 0;
}
.hero-content {
    animation: fadeInUp 1s ease-out forwards;
}

/* Hover effects for service items */
.service-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Contact section */
.contact {
    /* Use a clean white background for the contact form and dark text for
       maximum readability. */
    background-color: var(--white);
    padding: 3rem 0;
    color: var(--dark);
}

.contact h2 {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--dark);
    font-size: 3rem;
    font-family: 'Comic Sans MS', 'Arial Black', var(--font-family);
    letter-spacing: 0.05em;
}

.contact p {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 2rem auto;
    color: var(--dark);
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
    font-size: 1rem;
    font-family: var(--font-family);
}

.form-group textarea {
    resize: vertical;
}

.form-group.full-width {
    grid-column: span 2;
}

button[type="submit"] {
    background-color: var(--red);
    color: var(--white);
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
}

button[type="submit"]:hover {
    background-color: var(--dark);
    color: var(--white);
}

/* Footer */
.footer {
    background-color: var(--red);
    color: var(--white);
    text-align: center;
    padding: 1rem 0;
    font-size: 0.9rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .nav-list li {
        margin-left: 1rem;
    }
    .hero h1 {
        font-size: 2rem;
    }
    .hero p {
        font-size: 1rem;
    }
}

/* Responsive adjustments for section headings.  Reduce the large
   headings on smaller screens to ensure they remain legible and
   don’t overwhelm the layout. */
@media (max-width: 768px) {
    .about h2,
    .process h2,
    .contact h2 {
        font-size: 2rem;
    }
}