/* ==========================================================================
   Common base styles for NEXTLIFE corporate site
   - Gothic (sans-serif) typography
   - Fluid typography with clamp()
   - Responsive refinements
   ========================================================================== */

:root {
    --font-gothic: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "MS Gothic", sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

/* Fluid font size base - scales from 14px at 320px to 18px at 1440px */
@media (min-width: 320px) {
    html {
        font-size: calc(0.875rem + 0.25 * ((100vw - 20rem) / 70));
    }
}

@media (min-width: 1440px) {
    html {
        font-size: 1.125rem;
    }
}

body {
    font-family: var(--font-gothic);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "palt";
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.02em;
}

/* Headings - heavier weight for gothic emphasis with fluid sizing */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-gothic);
    font-weight: 700;
    letter-spacing: 0.01em;
}

h1 {
    line-height: 1.3;
    font-size: clamp(2rem, 5vw, 3.5rem);
}

h2 {
    line-height: 1.35;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
}

h3 {
    line-height: 1.45;
    font-size: clamp(1.25rem, 3vw, 1.875rem);
}

h4 {
    line-height: 1.45;
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
}

/* Override Tailwind utility font classes to use gothic */
.font-headline-lg,
.font-headline-lg-mobile,
.font-headline-md,
.font-display-xl,
.font-body-lg,
.font-body-md,
.font-label-md {
    font-family: var(--font-gothic);
}

.font-metadata-sm {
    font-family: var(--font-mono);
    letter-spacing: 0.12em;
}

/* Japanese class kept for compatibility - now gothic */
.font-japanese {
    font-family: var(--font-gothic);
    letter-spacing: 0.02em;
    line-height: 1.75;
}

h1.font-japanese,
h2.font-japanese {
    line-height: 1.4;
    letter-spacing: 0.01em;
    font-weight: 700;
}

h3.font-japanese,
h4.font-japanese {
    line-height: 1.5;
    letter-spacing: 0.02em;
    font-weight: 600;
}

p.font-japanese,
span.font-japanese,
li.font-japanese {
    line-height: 1.8;
    letter-spacing: 0.02em;
}

/* Display headlines - tighter for visual punch */
.font-display-xl {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.font-headline-lg {
    font-weight: 700;
    letter-spacing: -0.005em;
}

/* Buttons & metadata stay tighter */
button, a.font-label-md {
    letter-spacing: 0.05em;
}

/* Material icons keep their default font */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.fill-icon {
    font-variation-settings: 'FILL' 1;
}

/* ==========================================================================
   Spacing refinements
   ========================================================================== */

/* Improve paragraph spacing for serif readability */
p + p {
    margin-top: 0.75em;
}

/* Responsive display title - fluid sizing */
.display-xl-responsive {
    font-size: clamp(2.5rem, 8vw, 5rem);
    line-height: 1.05;
}

/* Better mobile padding inside cards */
@media (max-width: 768px) {
    body {
        line-height: 1.8;
    }
}

/* ==========================================================================
   Mobile Menu Drawer Styles
   ========================================================================== */

#mobile-menu.is-open .absolute.inset-0.bg-on-background\/50 {
    opacity: 1;
}

#mobile-menu.is-open aside {
    transform: translateX(0);
}

/* Mobile menu link current page highlighting */
nav a.is-current {
    color: var(--tw-color-primary, #6366f1);
    font-weight: 600;
}

/* ==========================================================================
   Responsive spacing and layout
   ========================================================================== */

/* Fluid spacing for margins and padding */
@media (max-width: 640px) {
    .px-margin-mobile {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .px-margin-mobile {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Responsive gap adjustments */
@media (max-width: 640px) {
    .gap-gutter {
        gap: 1rem;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .gap-gutter {
        gap: 1.5rem;
    }
}

/* Better responsive section gaps */
@media (max-width: 768px) {
    .mb-section-gap {
        margin-bottom: 3rem;
    }
}

@media (min-width: 769px) {
    .mb-section-gap {
        margin-bottom: 6rem;
    }
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.broken-grid-offset {
    transform: translateY(32px);
}

@media (min-width: 768px) {
    .asymmetric-bleed-left {
        margin-left: -80px;
    }
}

/* Technical bracket decoration */
.technical-bracket {
    position: relative;
}

.technical-bracket::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #757687;
    border-left: 1px solid #757687;
}

.technical-bracket::after {
    content: '';
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    border-bottom: 1px solid #757687;
    border-right: 1px solid #757687;
}

/* ==========================================================================
   Form elements - mincho friendly
   ========================================================================== */

input, textarea, select {
    font-family: var(--font-gothic);
    letter-spacing: 0.02em;
}

input::placeholder,
textarea::placeholder {
    font-family: var(--font-gothic);
    opacity: 0.5;
}

/* ==========================================================================
   Responsive button and interactive elements
   ========================================================================== */

/* Touch-friendly tap targets */
@media (max-width: 768px) {
    button,
    a {
        min-height: 44px;
        min-width: 44px;
    }

    button span,
    a span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Responsive button padding */
@media (max-width: 640px) {
    .px-6 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .py-3 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/* ==========================================================================
   Text overflow prevention
   ========================================================================== */

/* Prevent text overflow on mobile */
@media (max-width: 640px) {
    .break-words {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }

    .truncate-mobile {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ==========================================================================
   Card and container responsive adjustments
   ========================================================================== */

@media (max-width: 640px) {
    .grid-cols-12 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .grid-cols-12 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* Responsive image sizing */
@media (max-width: 640px) {
    img {
        max-width: 100%;
        height: auto;
    }
}

/* ==========================================================================
   Navigation responsive adjustments
   ========================================================================== */

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