/* Styles are ordered:
    1. General Styles for all files
    2. Files by alphabetical order (ex. about.php, custom-arcades.php, index.php etc.)
    3. Sections within a file from top to bottom 
*/


/*--------------------------------------------------------------------------------------//
//                                    General Styles                                    //
//--------------------------------------------------------------------------------------*/

/* Reusable global variables */
:root {
    --da-orange: #F34C18;      /* Orange for headers */
    --da-dark-orange: #EB3518; /* Dark Orange for buttons */
}

/* Responsive Font Sizes */
.font-size-14-15 {
    font-size: clamp(13px, 1.8vw, 15px);
}
.font-size-14-16 {
    font-size: clamp(14px, 2vw, 16px);
}
.font-size-15-18 {
    font-size: clamp(15px, 2.2vw, 18px);
}


/* Main Sections Container */
.home-section {
    padding-top:80px;
	padding-bottom:60px;
}

/* Section Titles (ex. Products, About Us, Our Team) */
.section-title {
    color: black;
    font-size: clamp(34px, 4.5vw, 49px);
    line-height: 54px;
    font-weight: 900;
    margin-bottom: 15px;
}
.section-title span {
    color: var(--da-orange);
}

/* Space between lines */
.line-height-2 {
    line-height: 2;
}
.line-height-1-3 {
    line-height: 1.3;
}

/* Row */
.row-wrapper {
    display: flex;
    flex-direction: row;
}

/* Prevent text from wrapping */
.no-wrap {
    white-space: nowrap;
}

/* Relative Positioning. Allows for absolute positioning of a child element */
.position-relative {
    position: relative; 
}

/* Small Icons for Phone, Address, Fax, Hours, etc. */
.small-icon {
    width: 1.1em;
    margin: 0 2px;
    transform: translateY(3px);
}

/* Rounded Corners */
.slide-wrap li {
    border-radius: 10px;
}
.retro-reload-img {
    border-radius: 8px;
}
.corporate-arcades .carousel-item img {
    border-radius: 10px;
}
.our-team img {
    border-radius: 8px;
}
.shop-image {
    border-radius: 8px;
}


/*--------------------------------------------------------------------------------------//
//                                    about.php                                         //
//--------------------------------------------------------------------------------------*/

/* About Us Container */
.about-us {
    padding-top: clamp(20px, 4vw, 50px);
    padding-bottom: 40px;
}
.about-us h2 {
    margin-bottom: 20px;
}

/* Our Team Container */
.our-team {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: clamp(20px, 7vw, 30px);
    width: 100%;
}

/* Image */
.our-team img {
    width: clamp(300px, 40%, 580px);
    height: auto;
}

/* Text */
.our-team-text {
    display: flex;
    flex-direction: column;
    margin-left: clamp(10px, 5%, 20px);
    width: 60%;
}

/* Small screens: Stack image on top of text */
@media (max-width: 750px) {
    .our-team {
        flex-direction: column;
    }
    .our-team img {
        width: 100%;
    }
    .our-team h2 {
        margin-bottom: 10px;
    }
    .our-team-text {
        margin-top: 20px;
        margin-left: 0;
        width: 100%;
    }
}

/* Retail Location Container */
.retail-location {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8%;
}

/* Header */
.retail-location h2 {
    align-self: flex-start;
    margin-bottom: 30px;
}

/* Wrapper for Description and Image */
.retail-location-text-img-wrapper {
    display: flex;
    flex-direction: row;
}

/* Description (Paragraphs, Contact Info w/ Icons) */
.retail-location-description {
    min-width: 52%;
}

/* Paragraphs */
.retail-location p {
    line-height: 2;
    /* 200% Spacing Between Lines */
}

/* Shop Image - This version goes to the right of the text. Only visible on large screens. */
.shop-image.large-screens-only {
    display: flex;
    flex-grow: 1;
    height: clamp(300px, 35vw, 380px);
    margin-left: clamp(30px, 4.5vw, 70px);
}

/* Shop Image - This version goes over the text. It's invisible on larger screens. */
.shop-image.small-screens-only {
    display: none;
    justify-self: center;
    height: 23%;
}

/* Icons for Hours, Fax */
.small-icon.hours, .small-icon.fax {
    margin-right: 6px;
}

/* Small screens */
@media (max-width: 700px) {
    .retail-location h2 {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /* Hide the image that goes to the right of the text */
    .shop-image.large-screens-only {
        display: none;
    }

    /* Show the image that goes over the text */
    .shop-image.small-screens-only {
        display: flex;
    }
}

/*--------------------------------------------------------------------------------------//
//                                  custom-arcades.php                                  //
//--------------------------------------------------------------------------------------*/

/* Corporate Arcades Wrapper - Required to allow flex on .corporate-arcades */
.corporate-arcades-wrapper {
    padding: clamp(20px, 6vw, 80px);
    padding-top: clamp(40px, 5vw, 80px);
    padding-bottom: clamp(40px, 5vw, 80px);
}
/* Main Container */
.corporate-arcades {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1100px;
}
/* Title - "Turn your Dream into a Reality!" */
.corporate-arcades .section-title {
    align-self: flex-start;
    font-size: clamp(30px, 4.5vw, 40px);
    margin-bottom: clamp(10px, 2.8vw, 30px);
}
/* Main Text (Excluding Header) */
.corporate-arcades-text {
    flex-direction: column;
    width: 62%;
}
.corporate-arcades-text p {
    margin-bottom: 5px; /* Spacing between paragraphs */
}
/* Carousel Container */
.corporate-arcades-carousel-container {
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
    padding-left: clamp(20px, 6vw, 100px);
    transform: scale(1.2);
}
/* Carousel Image */
.corporate-arcades .carousel-item img {
    max-width: 400px;
    max-height: 380px;
}
/* Medium screens: Reduce space to the left of the carousel */
@media (max-width: 1000px) {
    .corporate-arcades-carousel-container {
        padding-left: 40px;
    }
}
/* Small screens: Stack text on top of image */
@media (max-width: 900px) {
    .corporate-arcades .row-wrapper {
        flex-direction: column;
    }
    .corporate-arcades-text {
        width: 100%;
    }
    .corporate-arcades-carousel-container {
        margin: 0;
        margin-top: clamp(40px, 8vw, 80px);
        margin-bottom: clamp(20px, 4vw, 40px);
    }
}
/*--------------------------------------------------------------------------------------//
//                        index.php - Arcade Games & Media Slider                       // 
//                           NeoGeo, Steam, NES, Netflix, etc                           //
//--------------------------------------------------------------------------------------*/

/* Left and Right Grey Arrows */
.arrow-left-25px, 
.arrow-right-25px,
.arrow-left-10px, 
.arrow-right-10px {
    position: absolute;
    background-repeat: no-repeat;
    width: 18px;
    height: 25px;
    top: 50%;
    z-index: 1000;
}
.arrow-left-25px {
    left: 25px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")
}
.arrow-right-25px {
    right: 25px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")
}
.arrow-left-10px {
    left: 10px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")
}
.arrow-right-10px {
    right: 10px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")
}


/*--------------------------------------------------------------------------------------//
//                          index.php - Retro Reload Section                            // 
//                  "Easy to add more games via our Retro Reload site"                  //
//--------------------------------------------------------------------------------------*/

/* Retro Reload Container */
section.retro-reload{
    display: flex; 			
    flex-direction: row;
    padding-left: 30px;		
    padding-right: 30px;	
    gap: 30px;				/* Gap between the image and text */
}
/* Retro Reload header */
.retro-reload h2.section-title {
    font-size: clamp(34px, 4vw, 40px); /* Font size slightly smaller than other headers to avoid 3 lines */
    max-width: 660px;        
}
/* Retro Reload Image */
.retro-reload img {
    display: flex;			
    align-self: center;		
    height: 100%;			
    width: 42%;				
}
/* Retro Reload Text */
.retro-reload-text {
    width: 58%;				
    max-width: 770px;	
    padding-right: clamp(0px, 3.5vw, 60px);	
}
/* "Each home arcade machine for sale on our website..." */
.retro-reload p {
    padding-bottom: clamp(8px, 2vw, 20px);
}

/* On medium screens, hide second paragraph. This gives more room to the image. */
@media (max-width: 950px) {
    .retro-reload .hide-on-medium-screens {
        display: none;
    }
}
/* On smaller screens, put the image on top of the text */
@media (max-width: 800px) {
    section.retro-reload {
        padding-top: 50px;
        flex-direction: column;
        padding-bottom: 40px;
    }
    .retro-reload .hide-on-medium-screens {
        display: block;
    }
    .retro-reload img {
        width: 100%;
    }
    .retro-reload-text {
        width: 100%;
    }
}

/*--------------------------------------------------------------------------------------//
//                                    press.php                                         //
//--------------------------------------------------------------------------------------*/

/* Press Heading at the top */
.da-in-the-media {
    padding-top: clamp(25px, 4vw, 45px);
    padding-bottom: 40px;
}

/* Row of Press Images */
.press-releases .Product_main_wrapper {
    padding-bottom: clamp(10px, 2.5vw, 35px);
}

/* Press Image Container (Not including text description below) */
.press-releases .press-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Press Image (Wrapped in press-box) */
.press-releases .press-box img {
    max-height: 100%;
}
.press-releases .press-box img.new-york-times {
    padding: 16px;
} 
.press-releases .press-box img.retro-blast {
    padding: 16px;
} 

/* On medium screens, reduce padding left/right of each container */
@media (max-width: 1200px) {
    .press-releases .col-md-4 {
        padding-left: 12px;
        padding-right: 12px;
    }
}
@media (max-width: 992px) {
    .press-releases .col-md-4 {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* On small screens, putting padding below each container instead of each row */
@media (max-width: 768px) {
    .press-releases .Product_main_wrapper {
        padding-bottom: 0;
    }
    .press-releases .col-md-4 {
        padding-bottom: 15px;
    }
}


/*--------------------------------------------------------------------------------------//
//                            products.php & tables.php                                 //
//--------------------------------------------------------------------------------------*/

/* 'Our Products' Section at the top */
.Product_main_wrapper.our_products {
    margin-top: 45px;
    margin-left: clamp(5px, 10vw, 35px);
    margin-right: clamp(5px, 10vw, 35px);
    margin-bottom: clamp(10px, 2.5vw, 35px);
}

.product-grid {
    margin-bottom: 20px;
}

/* Product Images */
.product-grid img {
    height: 100%; /* Prevents bug where image would overflow div */
}

/* Row of up to 3 Products */
.product-grid .Product_main_wrapper section {
    padding-bottom: clamp(5px, 3vw, 35px);
}

/* Tables.php Only: Header */
h2.build-the-arcade.we-can {
    margin-bottom: 0px; /* Remove default margin */
}

@media (max-width: 1200px) {
    /* Text box for each product */
    .product-grid .Product_main_wrapper p {
        height: 120px;
    }
}
@media (max-width: 992px) {
    /* Outer container for products*/
    .product-grid .Product_main_wrapper .container {
        max-width: 850px;
    }
    /* Text box for each product */
    .product-grid .Product_main_wrapper p {
        height: 139px;
    }
    /* Individual Product Container */ 
    .product-grid .Product_main_wrapper .col-md-4 {
        padding: 5px;
    }
}
@media (max-width: 768px) {
    /* 'Our Products' Section at the top */
    section.product-grid .Product_main_wrapper {
        padding-bottom: 0px;
    }
    /* Individual Product Container */ 
    .product-grid .Product_main_wrapper .col-md-4 {
        padding: 0 clamp(5px, 5vw, 60px);
        margin-bottom: 15px;
    }
    /* Text box for each product */
    .product-grid .Product_main_wrapper p {
        height: 69px; /* nice */
    }
}
@media (max-width: 500px) {
    /* Text box for each product */
    .product-grid .Product_main_wrapper p {
        height: 83px; 
    }
}
/*--------------------------------------------------------------------------------------//
//                                     Arcade Page                                      //
//--------------------------------------------------------------------------------------*/

/* Bubble upgrades OLD ~~~~~~~~~~~~~~~~~~~~ */
.bubble-upgrades-container {
    display: flex;
    flex-direction: row;
    position: absolute;
    right: 0;
    justify-content: flex-end;
    width: 100%;
    transform: translate(-8px, -12px);
    z-index: 1; /* Ensure the bubble upgrades are on top of the gallery */
}
.bubble-upgrade {
    position: absolute;
    pointer-events: none; /* Ensure upgrades don't block the ability to expand the gallery */
}

/* Container for bubble upgrades in the corner */
.corner-upgrades {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    left: 28px;
    top: 12px;
    width: 100%;
}
.corner-upgrades .bubble-upgrade {
    position: static; /* Overwrite absolute positioning to keep them in the corner */
    width: 11.5%;
}

/* Bubble upgrades NEW ~~~~~~~~~~~~~~~~~~~~ */

/* All Bubble Upgrades */
.bubble-upgrade-container {
padding-right: 20px;
}
.bubble-upgrade {
width: 15%;
margin-right: 18px;
}

/* Bubble Upgrades w/ drawn line */
.diagonal-line-container {
width: 18%;
}
.diagonal-line-container img {
display: block; /* Moves diagonal line to bottom left of image */
}
.diagonal-line-container::after {
content: '';
position: absolute;
width: 1px;
height: 50px; /* Default height, likely will overridden by custom height */
background-color: #cacaca;
transform: rotate(45deg); /* Default angle, likely will overridden by custom angle */
transform-origin: top left; /* Rotate around the top-left corner */
}

/* Show bubble upgrades from top to bottom */
.bubble-upgrade.upgrade-1 {
margin-top: 2%;
}
.bubble-upgrade.upgrade-2 {
margin-top: 18%;
}
.bubble-upgrade.upgrade-3 {
margin-top: 34%;
}
.bubble-upgrade.upgrade-4 {
margin-top: 51%;
}
.bubble-upgrade.upgrade-5 {
margin-top: 68%;
}

/* Arcade Descriptions */
.arcade-desc-bullet-points .joystick-icon {
    height: 17.5px;
    width: 17px;
    transform: translateY(1px);
    margin-right: 2px;
}
.arcade-desc-bullet-points .trackball-icon {
    height: 15.5px;
    width: 16.5px;
    transform: translateY(3.5px);
    margin-right: 2px;
}
.arcade-desc-bullet-points .row-wrapper {
    height: 24px;
}
.arcade-desc-bullet-points {
    color: black;
}
.arcade-desc-bullet-points .desc-icon {
    font-size: 18.5px;
}