/*
Theme Name: Ford Theme
Theme URI: https://example.com/ford-theme/
Description: A child theme for Twenty Twenty-Four.
Author: Strawnimation
Author URI: https://example.com/
Template: twentytwentyfour
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ford-theme
Tags: one-column, one-page, block-styles,  
*/

/* Your Ford Theme CSS customizations start here! */



/* Set BOLD TEXT to Weight */

body strong, /* Assuming body font is PT Futura */
body b{
    /* Only apply if the font in use for this specific element is PT Futura.
       CSS alone cannot easily check the *resolved* font-family of an element
       before applying a style. So, this relies on PT Futura being the primary font. */
    font-weight: 400; /* Or 500, if you have that weight of PT Futura */
}

/************************************************************************/
/************************************************************************************************/
/************************************************************************************************/
/************************************************************************************************/
/*********** DEFAULT STYLES (Regular Desktops) **************/

.cover-block-set {
    height: clamp(605px, calc(100vh), 2000px);
}

.aspect-ratio-container {
    width: 100%;
    height: clamp(605px, calc(100vh), 2000px);
    background-color: transparent;
    border: 0px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Stack rows vertically */
}

.aspect-row {
    width: 100%;
    display: flex;
    border-bottom: 0px dashed #aaa;
    overflow: hidden;
}

.aspect-row:last-child {
    border-bottom: none;
}

.top-center-image {
    height: calc(clamp(605px, calc(100vh), 2000px)*0.15);
    width: clamp(150px, calc(70%), 900px);
}

/* Styling for Row 5 (two columns) */
.row-5 {
    justify-content: space-between;
    align-items: stretch;
}

.column {
    display: flex;
    align-items: center;
    padding: 2%;
    font-size: calc(0.8vmin + 0.4vw);
}

.column-left {
    width: 40vw;
    justify-content: flex-start;
    background-color: rgba(0, 0, 0, 0.05);
    text-align: left;
    background-color: transparent;
}

.column-right {
    width: 60vw;
    justify-content: flex-end;
    background-color: transparent;
    text-align: right;
}

.column img {
    max-width: 100%;
    max-height: 80%;
    object-fit: contain;
}


/************************************************************************************************/
/************************************************************************************************/
/************************************************************************************************/
/************************************************************************************************/

    .image-button-link {
        opacity: 0.5; /* Initial opacity */
        line-height: 0;
        display: inline-block;
        border: none; /* Ensure no border */
        outline: none; /* Ensure no outline (e.g., on focus) */
        text-decoration: none; /* Ensure no underline */
        transition: opacity 0.3s ease;
    }

    .image-button-link:hover {
        opacity: 1.0; /* Fully opaque on hover */
        border: none; /* Explicitly no border on hover */
        outline: none; /* Explicitly no outline on hover */
    }

    .image-button-link:checked {
        border: none; /* Explicitly no border on hover */
        outline: none; /* Explicitly no outline on hover */
    }

/************* PLAY BUTTON ************/

.play-button {
	height: 100%; /* This attempts to set height based on parent */
	width: 100%; /* 'vm' is likely a typo for 'vw' (viewport width) or you might mean '100%' */
	overflow: hidden;
	        border: none; /* Explicitly no border on hover */
        outline: none; /* Explicitly no outline on hover */
	opacity: 80%;
    top: 0px;
	
}

.play-button:hover{
	opacity: 90%;
	
}

    /*SPECIAL RESPONSIVE CONDITION*/

@media (min-width: 700px) and (max-height: 900px) {
  .play-button {
    top: clamp(0px, calc( (900px - 100vh) / 200 * 78 ), 78px);
  }
}


/*********** Made By Text **************/

.lock-main-logo-height{
    min-height: calc(clamp(605px, calc(100vh), 2000px)*0.30);
    max-height: calc(clamp(605px, calc(100vh), 2000px)*0.30);
}

.my-heading-group {
padding-top: 30px;
max-height: calc(clamp(605px, calc(100vh), 2000px)*0.14);
min-height: calc(clamp(605px, calc(100vh), 2000px)*0.14);
}

.my-footer-group{
    padding-top: 30px;
}

.made-by-text {
  font-family: "baskerville-urw", serif;
  font-weight: 700;
  font-style: normal;
  position: relative;
  font-size: clamp(0.8rem, calc(3vw + 2.1px), 2.5rem);
  /* Set the final color */
  color: #C1DAE3;
}

.rights-group-foot{
        top: -15px;
  position: relative;
}

/* --- STATE 1: Narrow Screen --- */
@media (max-width: 700px) {
  .made-by-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    /* The 'top' value will be set by JavaScript */
    /* top: calc(clamp(700px, 100vh, 2000px) * 0.35);  <-- We remove this */

    /* Apply the "narrow" version of the animation */
    animation: fadeInNarrow 0.75s forwards;
  }
}

/* --- STATE 2: Wide Screen --- */
@media (min-width: 701px) {
  .made-by-text {
    position: relative; /* Or whatever its wide-screen position is */
    top: 30px;
    left: 0px;

    /* Apply the "wide" version of the animation */
    animation: fadeInWide 0.75s forwards;
  }
}

/* --- Keyframes --- */
/* they need different names to re-trigger */

@keyframes fadeInNarrow {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInWide {
  from { opacity: 0; }
  to { opacity: 1; }
}

/****** FOOTER DETAIL *******/
    .ford-copy-right{
        font-size: clamp(0.7rem, calc(1.1vw + 2.1px), 1.1rem);
    }

    .film-details-text{
        font-size: clamp(1.1rem, calc(1.4vw + 2.1px), 1.4rem);
    }
    
    @media screen and (min-width: 1080px) and (orientation: landscape) {
        
        .film-details-text{
            font-size: clamp(1.1rem, calc(1.3vw + 2.1px), 1.3rem);
        }

    }

    .Footer-Nav-align {
        align-items: center;
    }

    /* Centre Logo Image - Redundant*/
    .center-logo-image {
        opacity: 0.3;
    }

    /*** RESPONSIVE CONDITIONS***/
    /*Smaller or = 840*/
    @media (max-width: 840px) {
        .rights-group-foot{
            top: 20px;
        }
    }

    /*Larger or = 841*/
    @media (min-width: 841px) {
        .rights-group-foot{
            top: -20px;
        }
    }
/****************************/