/*
 * UnderConstructionPage
 * Hyaku Hyaku Shop — Custom Coming Soon Theme CSS
 * Design: Clean, minimal, white-background with centered video and Orbitron typography
 * Matches client mockup: mockup_under_construction.png
 *
 * Structure:
 *   1. CSS Custom Properties (design tokens for easy customisation)
 *   2. Reset & Base
 *   3. Layout — Main Wrapper
 *   4. Video Container
 *   5. Typography — Heading & Subtext
 *   6. Social Icons
 *   7. Responsive Breakpoints
 */


/* =============================================================================
   1. CSS Custom Properties
   Centralise all design values so future colour/size changes
   require edits in only one place — easy for client handoff.
   ============================================================================= */
:root {
    /* Colour palette — matches the clean white mockup */
    --color-background:   #fdfdfd;
    --color-text-primary: #000000;   /* near-black for heading — strong contrast */
    --color-text-sub:     #bcbec0;   /* mid-grey for subtitle — hierarchy */
    --color-social-icon:  #1a1a1a;
    --color-social-hover: #888888;   /* subtle hover — keeps the minimal aesthetic */

    /* Typography */
    --font-orbitron:      'Orbitron', 'Courier New', monospace; /* fallback stack */
    --font-size-heading:  clamp(1.5rem, 4vw, 2.6rem);  /* fluid — scales between viewports */
    --font-size-sub:      clamp(0.75rem, 2vw, 1rem);
    --font-weight-heading: 700;
    --font-weight-sub:     400;
    --letter-spacing-heading: 0.15em;  /* wide tracking — matches mockup style */
    --letter-spacing-sub:     0.25em;  /* even wider — very spaced out on mockup */

    /* Layout */
    --video-max-width:    520px;   /* caps video size on large screens */
    --section-gap:        2rem;    /* vertical gap between video and text */
    --text-gap:           0.6rem;  /* gap between heading and subtext */
}


/* =============================================================================
   2. Reset & Base
   Minimal reset — avoids full reset libraries for a lightweight page.
   ============================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box; /* predictable sizing model across all elements */
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;       /* required for the flexbox full-viewport centering below */
    width: 100%;
    overflow-x: hidden; /* prevent horizontal scroll on mobile */
}

body {
    background-color: var(--color-background);
    color: var(--color-text-primary);

    /*
     * font-smoothing improves rendering of Orbitron on macOS/iOS,
     * making thin strokes crisper on retina displays.
     */
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =============================================================================
   3. Layout — Main Wrapper
   Flexbox column centres all content both vertically and horizontally.
   min-height: 100svh uses the "small viewport height" unit — on mobile this
   accounts for browser chrome (address bar) so content never gets clipped.
   Falls back to 100vh for browsers that don't support svh.
   ============================================================================= */

.ucp-wrapper {
    display:         flex;
    flex-direction:  column;
    align-items:     center;         /* horizontal centering */
    justify-content: center;         /* vertical centering */
    min-height:      100vh;          /* fallback for older browsers */
    min-height:      100svh;         /* modern mobile-aware viewport height */
    padding:         2rem 1.5rem;    /* breathing room on small screens */
    text-align:      center;
    gap:             var(--section-gap);
}


/* =============================================================================
   4. Video Container & Element
   The container constrains the video's maximum size while the video
   itself fills its container fluidly. object-fit: contain preserves the
   correct aspect ratio of the original illustration.
   ============================================================================= */

.ucp-video-container {
    width:     100%;
    max-width: var(--video-max-width);

    /*
     * Slight animation on load — fades the video in gently.
     * Uses will-change: opacity to hint GPU compositing for a smooth fade.
     */
    animation:    ucp-fade-in 1s ease-out both;
    will-change:  opacity;
}

.ucp-video {
    width:      100%;
    height:     auto;      /* maintains aspect ratio */
    display:    block;     /* removes inline baseline gap below video */
    object-fit: contain;   /* never crops the illustration */

    /*
     * No border, shadow, or background — the video itself has a white/transparent
     * bg matching the page, so no wrapper styling is needed.
     */
}


/* =============================================================================
   5. Typography — Heading & Subtext
   Both use Orbitron as specified in the client brief.
   The content block is a flex column for precise control over spacing.
   ============================================================================= */

.ucp-content-block {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--text-gap);

    /* Delayed fade-in — appears after the video, creating a subtle sequence */
    animation:      ucp-fade-in 1s ease-out 0.4s both;
    will-change:    opacity;
}

/* Primary "coming soon" heading */
.ucp-heading {
    font-family:     var(--font-orbitron);
    font-size:       16px;
    font-weight:     400;
    color:           #000000;
    letter-spacing:  var(--letter-spacing-heading);
    text-transform:  lowercase; /* matches mockup — "coming soon" not "COMING SOON" */
    line-height:     1;
    margin-bottom: 0px;
}

/* Subtitle — shop name / tagline */
.ucp-subtext {
    font-family:    var(--font-orbitron);
    font-size:      var(--font-size-sub);
    font-weight:    400;
    color:          #bcbec0;
    letter-spacing: var(--letter-spacing-sub);
    line-height:    1.6;

    /*
     * The subtitle on the mockup contains mixed scripts (Latin + Japanese/CJK).
     * word-break: keep-all prevents awkward mid-word breaks in CJK text.
     * overflow-wrap: anywhere ensures very long Latin words still wrap on narrow screens.
     */
    word-break:     keep-all;
    overflow-wrap:  anywhere;
}


/* =============================================================================
   6. Social Icons
   Hidden by default to match the clean mockup.
   If the client later enables social icons in the plugin admin,
   the .ucp-social block becomes visible and styled automatically.
   ============================================================================= */

.ucp-social {
    margin-top: 1.5rem;
    display:    flex;
    gap:        0.75rem;
    align-items: center;
    justify-content: center;
    flex-wrap:  wrap; /* wraps to next line on very narrow screens */
}

/* Style icons injected by the plugin (typically <a><i class="fa-..."></i></a>) */
.ucp-social a i {
    color:      var(--color-social-icon);
    font-size:  1.25rem;
    transition: color 0.2s ease; /* smooth hover state */
}

.ucp-social a:hover i,
.ucp-social a:focus i {
    color: var(--color-social-hover);
    outline: none; /* remove default — handled by focus-visible below */
}

/* Keyboard focus ring — accessibility for keyboard/screen reader users */
.ucp-social a:focus-visible {
    outline:        2px solid var(--color-text-primary);
    outline-offset: 3px;
    border-radius:  3px;
}


/* =============================================================================
   7. Keyframe Animations
   Simple opacity fade-in used on the video and text blocks.
   translateY gives a gentle upward drift for polish.
   ============================================================================= */

@keyframes ucp-fade-in {
    from {
        opacity:   0;
        transform: translateY(12px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}

/*
 * Accessibility: respect the user's system preference to reduce motion.
 * Disables animations entirely for users who have opted into reduced motion.
 */
@media (prefers-reduced-motion: reduce) {
    .ucp-video-container,
    .ucp-content-block {
        animation: none;
    }
}


/* =============================================================================
   8. Responsive Breakpoints
   The fluid clamp() values on font-size handle most scaling automatically.
   These breakpoints handle layout shifts at major viewport widths.
   ============================================================================= */

/* Large screens: give the video more room to breathe */
@media (min-width: 1200px) {
    :root {
        --video-max-width: 580px;
        --section-gap:     2.5rem;
    }
}

/* Tablet: moderate video size reduction */
@media (max-width: 768px) {
    :root {
        --video-max-width: 380px;
        --section-gap:     1.5rem;
    }
}

/* Small mobile: compact everything while keeping the layout intact */
@media (max-width: 480px) {
    :root {
        --video-max-width: 280px;
        --section-gap:     1.25rem;
        --text-gap:        0.5rem;
    }

    .ucp-wrapper {
        padding: 1.5rem 1rem;
    }
}