@import '../styles/_tokens.css';
@import '../styles/tokens/_tokens.home.css';

/* Homepage specific styles */

/* Approved Non-Token Values:
 * - 100vh: Viewport height for full-screen layouts
 * - 100%: Full width/height for containers
 * - 1fr: Grid template column value for responsive design
 */
body {
    margin: var(--space-0);
    padding: var(--space-0);
    font-family: var(--font-family-base);
    background: var(--color-bg);
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--color-text);
}

.homepage-container {
    display: flex;
    min-height: 100vh;
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--main-content-padding-top) var(--main-content-padding-right) var(--main-content-padding-bottom);
    text-align: center;
    width: 100%;
    max-width: none;
}

.hero-section {
    max-width: var(--container-max-width);
    margin-bottom: var(--main-content-margin-bottom);
}

.hero-logo {
    width: var(--logo-width);
    height: auto;
    /* Desktop-only positional offsets.
       These negative margins intentionally pull the logo/content into place.
       Mobile tokens reset these margins to 0. */
    margin-left: calc(-1 * var(--hero-logo-margin-left));
    order: var(--hero-logo-order);
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--hero-content-gap);
    margin-bottom: var(--hero-content-margin-bottom);
    padding-top: var(--hero-content-padding-top);
    width: 100%;
    /* Desktop-only positional offsets.
       These negative margins intentionally pull the logo/content into place.
       Mobile tokens reset these margins to 0. */
    margin-left: calc(-1 * var(--hero-content-margin-left));
    margin-right: auto;
    flex-direction: var(--hero-flex-direction);
}

.chess-board-container {
    flex-shrink: 0;
    margin-right: var(--hero-board-margin-right);
    order: var(--hero-board-order);
}

.hero-text-container {
    flex-shrink: 0;
    max-width: var(--container-small-max-width);
    margin-right: var(--hero-text-margin-right);
    order: var(--hero-text-order);
}

.hero-text {
    text-align: left;
}

.hero-text .cta-buttons {
    margin-top: var(--hero-text-cta-margin-top);
    justify-content: flex-start;
    position: relative;
    z-index: var(--z-above);
}

.hero-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin-bottom: var(--hero-title-margin-bottom);
    line-height: var(--line-height-tight);
}



.hero-note {
    font-size: var(--hero-note-font-size, var(--font-size-sm));
    color: var(--color-text-muted);
    font-style: italic;
    line-height: var(--line-height-normal);
}

#hero-board {
    display: grid;
    grid-template-columns: repeat(8, var(--board-size));
    grid-template-rows: repeat(8, var(--board-size));
    border-radius: var(--hero-board-border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-md) var(--color-shadow-board);
    background: var(--color-bg);
}

.hero-square {
    width: var(--board-size);
    height: var(--board-size);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--board-size) * var(--hero-square-font-size-multiplier));
    user-select: none;
    position: relative;
    overflow: visible;
}

.hero-square.light {
    background-color: var(--color-board-light);
}

.hero-square.dark {
    background-color: var(--color-board-dark);
}

.hero-subtitle {
    font-size: var(--font-size-xl);
    color: var(--color-text);
    margin-bottom: var(--hero-subtitle-margin-bottom);
    line-height: var(--line-height-relaxed);
}

.cta-buttons {
    display: flex;
    gap: var(--cta-button-gap);
    justify-content: center;
    flex-wrap: wrap;
}

.cta-button {
    padding: var(--cta-button-padding-vertical) var(--cta-button-padding-horizontal);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    border: none;
    border-radius: var(--cta-button-border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    display: inline-block;
}

.cta-primary {
    background: var(--color-primary);
    color: var(--color-black);
    box-shadow: var(--shadow-sm) var(--color-shadow-primary);
}

.cta-primary:hover {
    transform: var(--cta-button-hover-transform);
    box-shadow: var(--shadow-2xl) var(--color-shadow-primary-hover);
}

.cta-secondary {
    background: var(--color-secondary);
    color: var(--color-white);
    border: var(--cta-button-border-width) solid var(--color-border);
}

.cta-secondary:hover {
    background: var(--color-secondary-hover);
    border-color: var(--color-border);
    transform: var(--cta-button-hover-transform);
}

.cta-button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.about-section {
    max-width: var(--container-max-width);
    margin-top: var(--about-section-margin-top);
}

.about-card {
    background: var(--color-card-bg);
    border-radius: var(--about-card-border-radius);
    padding: var(--about-card-padding);
    text-align: center;
    border: var(--cta-button-border-width-thin) solid var(--color-border);
    transition: transform var(--transition-fast), border-color var(--transition-fast);
    box-shadow: var(--shadow-lg) var(--color-shadow-card);
}

.about-card:hover {
    transform: var(--cta-button-hover-transform-large);
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-xl) var(--color-shadow-card-hover);
}

.about-icon {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--about-icon-margin-bottom);
    color: var(--color-text-light);
}

.about-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin-bottom: var(--about-title-margin-bottom);
}

.about-content {
    text-align: left;
}

.about-greeting {
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--about-greeting-margin-bottom);
    font-style: italic;
}

.about-description {
    color: var(--color-text-light);
    line-height: var(--line-height-loose);
    font-size: var(--font-size-md);
    margin-bottom: var(--about-description-margin-bottom);
}

.about-signature {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-top: var(--about-signature-margin-top);
    text-align: right;
    font-style: italic;
}



/* Custom Scrollbar */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
    background: var(--color-scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar-thumb);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-scrollbar-thumb-hover);
}

/* Responsive Design */
/* Note: CSS custom properties aren't supported in media queries across browsers.
   Use literal 768px here; keep --bp-md in tokens for documentation/reference. */
@media (max-width: 768px) {

    /* Main content adjustments */
    .main-content {
        margin-left: 0;
        padding: var(--main-content-mobile-padding);
    }

    /* Hero layout adjustments */
    .hero-logo {
        width: var(--logo-mobile-width);
    }

    .hero-title {
        font-size: var(--hero-title-font-size, var(--font-size-2xl));
        line-height: var(--line-height-tight);
        max-width: 28ch;
    }

    .hero-subtitle {
        font-size: var(--hero-subtitle-font-size, var(--font-size-xl));
        line-height: var(--line-height-relaxed);
    }

    /* Mobile hero grid: logo on top, board left + text right, centered as a pair */
    .hero-content {
        display: grid;
        grid-template-columns: auto auto;      /* board | text */
        grid-template-areas:
            "logo logo"
            "board text";
        justify-content: center;               /* center the whole 2-col pair */
        align-items: center;
        gap: var(--hero-content-gap);
        margin-left: 0;
        margin-right: 0;
        padding-top: var(--hero-content-padding-top);
    }

    .hero-logo {
        grid-area: logo;
        width: var(--logo-mobile-width);
        margin: -100px auto 0 auto; /* pull logo up by 100px and center */
    }

    .chess-board-container { 
        grid-area: board; 
        margin: -100px 0 0 0; /* pull board up by 100px */
    }

    .hero-text-container {
        grid-area: text;
        max-width: min(90vw, var(--container-small-max-width));
        margin-top: -100px; /* pull text up to be closer to the board */
    }

    .hero-text {
        text-align: left; /* looks better to the right of board */
    }

    .cta-buttons {
        flex-direction: var(--cta-buttons-direction-mobile);
        align-items: var(--cta-buttons-align-mobile);
    }
    
    /* Mobile button sizing */
    .cta-button {
        padding: var(--cta-button-padding-vertical-mobile, var(--cta-button-padding-vertical)) var(--cta-button-padding-horizontal-mobile, var(--cta-button-padding-horizontal));
        font-size: var(--cta-button-font-size-mobile, var(--font-size-lg));
    }

    .features-section {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) {
  /* HERO takes the viewport height minus the page's vertical padding */
  .hero-section {
    /* Fallback for older browsers */
    min-height: calc(100vh - var(--main-content-padding-top) - var(--main-content-padding-bottom));
  }
  @supports (height: 100dvh) {
    .hero-section {
      min-height: calc(100dvh - var(--main-content-padding-top) - var(--main-content-padding-bottom));
    }
  }

  /* Use grid to center the inner block vertically, while keeping left-to-right layout intact */
  .hero-section {
    display: grid;
  }
  .hero-content {
    align-self: center;   /* vertical centering within the grid cell */
    margin-block: 0;      /* remove internal bias that can pull it down */
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .cta-button:hover {
    transform: none;
    box-shadow: var(--shadow-sm) var(--color-shadow-primary);
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}