/*
  style.css

  This stylesheet defines the visual design of the King N8tion landing page.
  Colours are drawn from the existing brands: deep purples and yellows for
  KN CHUNEZ, warm oranges and blacks for KN Apex Group, and a dark backdrop to
  unify the page.  Accessibility is prioritised with high contrast text,
  responsive typography and sufficient spacing throughout.  The layout scales
  gracefully from desktop down to mobile using flexbox and media queries.
*/

/*
  Pull in the same font families used on knapexgroup.com to mirror the
  typography. The primary heading uses a high‑contrast serif font and
  body copy uses a clean sans‑serif.  These imports fetch the fonts
  asynchronously from Google Fonts.
*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Open+Sans:wght@400;600&display=swap');

/*
  Embed the Aktiv Grotesk typeface supplied by the user for the main title.
  The TTF file lives alongside this stylesheet.  We assign it a custom
  family name (AktivGroteskXBoldItalic) and later reference this name in
  the header styles.
*/
@font-face {
    font-family: 'AktivGroteskXBoldItalic';
    src: url('AKTIV GROTESK W04 XBOLD ITALIC.TTF') format('truetype');
    font-weight: 700;
    font-style: italic;
}

/* Root variables make it easy to adjust brand colours in one place. */
:root {
    --knchunez-primary: #4b006e;      /* deep purple */
    --knchunez-accent:  #ffce00;      /* vibrant yellow */
    --knapex-primary:   #f75c03;      /* bright orange */
    --knapex-accent:    #000000;      /* rich black */
    --background-dark:  #0a0a0a;      /* page background */
    --text-light:       #ffffff;      /* primary text colour */
    --text-muted:       #e0e0e0;      /* secondary text colour */
}

/* Reset default margins and paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /*
     * Use Open Sans as the default body font across the entire site.  This ensures
     * consistency for paragraphs, mission statements and other supporting text.  A
     * fallback of generic sans‑serif is provided for browsers that fail to load
     * the Google Font.  Previously the body used Arial/Helvetica, which caused
     * inconsistent typography with the mission section and card descriptions.
     */
    font-family: 'Open Sans', sans-serif;
    background-color: var(--background-dark);
    color: var(--text-light);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

header {
    text-align: center;
    padding: 40px 20px 20px;
}

#logo {
    max-width: 250px;
    width: 100%;
    height: auto;
}

header h1 {
    margin-top: 20px;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-light);
    /* Use the supplied Aktiv Grotesk font for the main title */
    font-family: 'AktivGroteskXBoldItalic', 'Playfair Display', serif;
}

#mission {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px 40px;
    text-align: center;
    font-size: 1.15rem;
    color: var(--text-muted);
    font-family: 'Open Sans', sans-serif;
}

/* Container for the two company panels */
#companies {
    display: flex;
    flex-wrap: wrap;
    min-height: 420px;
    transition: all 0.3s ease-in-out;
}

/* Base styling for each company section */
.company-section {
    position: relative;
    flex: 1 1 50%;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: flex 0.4s ease-in-out, filter 0.4s ease-in-out, transform 0.4s ease-in-out;
}

/* Overlay content wrapper ensures readability over coloured backgrounds */
.company-section .content {
    text-align: center;
    padding: 40px 20px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 8px;
    backdrop-filter: blur(4px);
    max-width: 90%;
}

.company-section h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--text-light);
    /*
     * Apply the Aktiv Grotesk typeface to all secondary titles.  This aligns
     * the branding of the card titles with the main header.  The fallback
     * fonts mirror those used in the primary header.
     */
    font-family: 'AktivGroteskXBoldItalic', 'Playfair Display', serif;
}

.company-section p {
    margin: 10px 0 20px;
    font-size: 1rem;
    color: var(--text-muted);
    /*
     * Ensure all body copy uses Open Sans.  Without this, paragraphs inherit
     * from the body tag, which previously used Arial/Helvetica.  Explicitly
     * setting the font here makes the card descriptions consistent with the
     * mission statement and other content on the page.
     */
    font-family: 'Open Sans', sans-serif;
}

/* Button styling for calls to action */
.company-section .cta-button {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.company-section .cta-button:hover {
    transform: translateY(-2px);
}

/* Specific colour schemes for KN CHUNEZ */
.knchunez {
    background: linear-gradient(135deg, var(--knchunez-primary) 0%, var(--knchunez-accent) 100%);
}

.knchunez .cta-button {
    background-color: var(--knchunez-accent);
    color: #000;
}

.knchunez .cta-button:hover {
    background-color: #ffd633;
}

/* Specific colour schemes for KN Apex Group */
.knapex {
    background: linear-gradient(135deg, var(--knapex-primary) 0%, var(--knapex-accent) 100%);
}

.knapex .cta-button {
    background-color: var(--knapex-primary);
    color: #fff;
}

.knapex .cta-button:hover {
    background-color: #ff7a26;
}

/* Interactive state when hovering over the companies section */
#companies.active .company-section {
    flex: 1 1 45%;
    filter: brightness(0.6);
}

/* Expanded panel emphasised during hover */
#companies.active .company-section.expanded {
    flex: 1 1 55%;
    filter: brightness(1);
    transform: scale(1.05);
}

/* Make layout stack vertically on small screens */
@media (max-width: 768px) {
    header h1 {
        font-size: 1.6rem;
    }
    #mission {
        font-size: 1rem;
    }
    #companies {
        flex-direction: column;
    }
    .company-section {
        flex: 1 1 100%;
        min-height: 280px;
    }
    /* On small screens we reset the interactive widths to full width */
    #companies.active .company-section,
    #companies.active .company-section.expanded {
        flex: 1 1 100%;
    }
}

footer {
    text-align: center;
    padding: 30px 20px;
    font-size: 0.9rem;
    color: var(--text-muted);
}