/* CyberHive_Styles.css - Fixed: content centered + smooth full scrolling (no sticking) */

@font-face {
    font-family: "CyberDyne";
    src: url("../Fonts/cyberdyne/cyberdyne.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Orbitron - loaded from /Fonts/Orbitron/static/ */
@font-face {
    font-family: "Orbitron";
    src: url("../Fonts/Orbitron/static/Orbitron-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Orbitron";
    src: url("../Fonts/Orbitron/static/Orbitron-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Orbitron";
    src: url("../Fonts/Orbitron/static/Orbitron-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Orbitron";
    src: url("../Fonts/Orbitron/static/Orbitron-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Orbitron";
    src: url("../Fonts/Orbitron/static/Orbitron-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Orbitron";
    src: url("../Fonts/Orbitron/static/Orbitron-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;           /* Allow body to scroll */
}

/* Hide scrollbar but keep scrolling */
html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar {
    display: none;
}

.background {
    position: relative;
    width: 100%;
    min-height: 100vh;          /* Use min-height, not fixed */
    overflow: visible;          /* Critical: allow content to expand */
    z-index: 1;
    display: flex;
    justify-content: center;    /* Center the .content horizontally */
    align-items: flex-start;    /* Align to top */
}

.background::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('Pictures/bk3.png');
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.content {
    width: 80%;                 /* Controlled width */
    min-height: 100vh;
    position: relative;
    overflow-y: visible;        /* Allow overflow if needed */
    overflow-x: hidden;
    padding-top: 100px;         /* Base top padding */
    padding-bottom: 100px;      /* Extra space at bottom */
    box-sizing: border-box;
    text-align: center;
    margin: 0 auto;             /* Final centering fallback */
}

/* Hide any internal scrollbar on .content */
.content::-webkit-scrollbar {
    display: none;
}

.content {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* h1 - CyberDyne */
h1 {
    font-family: "CyberDyne", Arial, sans-serif;
    font-size: 44px;
    margin-bottom: 20px;
    color: #ff9900;
    text-shadow:
        -1px -1px 0 black,
        1px -1px 0 black,
        -1px 1px 0 black,
        1px 1px 0 black;
    font-weight: normal;
    text-align: center;
}

/* h2, h3 - Orbitron */
h2, h3 {
    font-family: "Orbitron", Arial, sans-serif !important;
    color: #ff9900;
    text-shadow:
        -1px -1px 0 black,
        1px -1px 0 black,
        -1px 1px 0 black,
        1px 1px 0 black;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-align: center;
}

h2 {
    font-size: 36px;
}

h3 {
    padding: 20px;
    font-size: 34px;
}

/* h4, h5, p - System fonts */
h4, h5,
p,
.text p,
.text-box-text,
.sub-text,
.empty-cart p,
#discount-message,
.shipping-info input,
.shipping-info input::placeholder,
.summary p,
.product-info p,
.shipping-options span,
.discount-section label,
.payment-option-text,
.clear-cart-button,
.remove-item,
.quantity-adjuster .quantity {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
    color: #ff9900;
    text-shadow:
        -1px -1px 0 black,
        1px -1px 0 black,
        -1px 1px 0 black,
        1px 1px 0 black;
    line-height: 1.6;
    letter-spacing: 0.5px;
}

h4 {
    font-size: 24px;
}

h5,
.product-info h5 {
    font-size: 22px;
}

p, .text-box-text, .summary p, .product-info p {
    font-size: 18px;
}

/* Buttons */
.addToCartButton,
.variant-select {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
}

.text-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 4px solid #000000;
    padding: 2px;
    margin-bottom: 8px;
    cursor: pointer;
    text-align: center;
    transition: transform 0.3s ease;
}

.text-box-text {
    font-size: 18px;
    display: none;
}

.text-box.active {
    height: auto;
}

.text-box.active .content {
    display: block;
}

/* Media queries - smaller fonts + extra small screens */
@media (max-width: 325px) {
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    h3 { font-size: 19px; }
    h4 { font-size: 15px; }
    p, .text-box-text { font-size: 13px; }
}

@media (max-width: 600px) {
    h1 { font-size: 26px; }
    h2 { font-size: 22px; }
    h3 { font-size: 21px; }
    h4 { font-size: 16px; }
    p, .text-box-text { font-size: 14px; }
}

@media only screen and (min-width: 601px) and (max-width: 1023px) {
    h1 { font-size: 36px; }
    h2, h3 { font-size: 28px; }
    h4 { font-size: 18px; }
    p, .text-box-text { font-size: 16px; }
}

@media only screen and (min-width: 1024px) and (max-width: 1439px) {
    h1 { font-size: 40px; }
    h2, h3 { font-size: 34px; }
    h4 { font-size: 22px; }
    p, .text-box-text { font-size: 17px; }
}

@media only screen and (min-width: 1440px) and (max-width: 2559px) {
    h1 { font-size: 44px; }
    h2, h3 { font-size: 38px; }
    h4 { font-size: 23px; }
    p, .text-box-text { font-size: 18px; }
}

@media only screen and (min-width: 2560px) {
    h1 { font-size: 50px; }
    h2, h3 { font-size: 42px; }
    h4 { font-size: 26px; }
    p, .text-box-text { font-size: 20px; }
}