/*
 * =============================================================================
 * bte-theme.css — Built to Endure Theme Overrides for Bootstrap 5
 * =============================================================================
 *
 * PURPOSE
 * This file layers brand-specific styles on top of Bootstrap's reset and
 * grid. Bootstrap handles layout (grid, spacing helpers, flex utilities).
 * This file handles: colours, typography, section backgrounds, custom
 * components (hero, cards, buttons, footer, pull quote) and responsive tweaks
 * that Bootstrap utilities alone can't express.
 *
 * LOAD ORDER (important!)
 * 1. bootstrap.min.css   ← reset + grid + utilities
 * 2. bootstrap-icons.css ← icon font
 * 3. bte-theme.css       ← this file (overrides last)
 *
 * TABLE OF CONTENTS
 * -----------------
 *  0.  Design Tokens
 *  1.  Base / Body
 *  2.  Bootstrap Spacing Extension (.py-lg-6)
 *  3.  Logo
 *  4.  Buttons
 *  5.  Section 1  — Header
 *  6.  Section 2  — Hero
 *  7.  Section 3  — Value Proposition
 *  8.  Section 4  — Takeaways Card
 *  9.  Section 5  — Pull Quote
 * 10.  Section 6  — Author Bio
 * 11.  Section 7  — Related Resources
 * 12.  Section 8  — CTA Banner
 * 13.  Section 9  — Footer
 * 14.  Accessibility & Motion
 * =============================================================================
 */


/* =============================================================================
 * 0. DESIGN TOKENS
 * All brand colours and shared values in one place.
 * Update here to re-skin the entire page.
 * ============================================================================= */
:root {
    /* Colours */
    --bte-bg:        #0b0d12;   /* page canvas — deepest dark */
    --bte-bg-alt:    #111520;   /* alternate section background */
    --bte-bg-card:   #181c27;   /* raised card surface */
    --bte-border:    rgba(255, 255, 255, 0.07);
    --bte-red:       #EC2028;   /* brand accent */
    --bte-red-dark:  #9b1c1c;
    --bte-white:     #ffffff;
    --bte-muted:     #ACC9F1;   /* secondary text */

    /* Typography */
    --bte-font:         'Inter', system-ui, sans-serif;
    --bte-font-display: Georgia, 'Times New Roman', serif;

    /* Motion */
    --bte-ease: 0.22s ease;
}


/* =============================================================================
 * 1. BASE / BODY
 * Dark background, white text, smooth antialiasing.
 * ============================================================================= */
body.bte-page {
    background-color: var(--bte-bg);
    color: var(--bte-white);
    font-family: var(--bte-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Red accent inline span — used inside headlines */
.bte-accent {
    color: var(--bte-red);
}


/* =============================================================================
 * 2. BOOTSTRAP SPACING EXTENSION
 * Bootstrap 5 ships py-0 through py-5. We add py-lg-6 for extra breathing
 * room on larger sections so we don't need to override py-5 globally.
 * ============================================================================= */
@media (min-width: 992px) {
    .py-lg-6 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
}


/* =============================================================================
 * 3. LOGO
 * Superscript glyph + wordmark used in both header and footer.
 * ============================================================================= */
.bte-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-family: var(--bte-font);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--bte-white) !important; /* override Bootstrap .navbar-brand colour */
    text-decoration: none;
    line-height: 1;
}

/* The small raised "T" before the wordmark */
.bte-logo__sup {
    font-size: 0.6em;
    vertical-align: super;
    opacity: 0.6;
    font-style: normal; /* <sup> can inherit italic in some resets */
}

.bte-logo__name {
    font-size: 0.875rem;
}


/* =============================================================================
 * 4. BUTTONS
 * Three visual variants: outline (hero), gradient (takeaways CTA), white (banner).
 * All extend a shared .bte-btn base; Bootstrap helpers handle margins/gaps.
 * ============================================================================= */

/* Shared base — overrides Bootstrap's own .btn if combined */
.bte-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.65rem 1.35rem;
    border-radius: 6px;
    font-family: var(--bte-font);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: opacity var(--bte-ease), transform var(--bte-ease);
}

.bte-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* Outline — transparent fill, subtle white border (hero) */
.bte-btn--outline {
    background: transparent;
    color: var(--bte-white);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.bte-btn--outline:hover {
    border-color: var(--bte-white);
    color: var(--bte-white);
}

/* Gradient — red → dark red (takeaways & other CTAs) */
.bte-btn--gradient {
    background: linear-gradient(90deg, var(--bte-red) 0%, var(--bte-red-dark) 100%);
    background: linear-gradient(90deg, #074D90 0%, #EC2028 100%);
    color: var(--bte-white);
    border: none;
}

/* .bte-btn--gradient:hover {
	border: 2px solid;
	border-image-source: radial-gradient(77.55% 649.19% at 3.5% 9.18%, #EC2028 0%, #204969 100%);
	transition:all var(--bte-ease);
}
 */
/* White fill — used on the dark CTA banner */
.bte-btn--white {
    background: var(--bte-white);
    color: #0b0d12;
    border: none;
    font-weight: 700; 
}

/* Arrow character nudges right on hover */
.bte-btn__arrow {
    display: inline-block;
    transition: transform var(--bte-ease);
}

.bte-btn:hover .bte-btn__arrow {
    transform: translateX(4px);
}


/* =============================================================================
 * 5. SECTION 1 — SITE HEADER
 * Bootstrap .navbar handles display:flex and sticky-top handles position.
 * We only need to set background and border.
 * ============================================================================= */
.bte-header {
    background-color: var(--bte-bg) !important;  /* override Bootstrap's bg-light default */
    border-bottom: 1px solid var(--bte-border);
}


header.main-header {
	top:0px;
}

/* =============================================================================
 * 6. SECTION 2 — HERO
 * Background is the base page dark.
 * The book cover gets a deep drop-shadow to lift it off the canvas.
 * Bootstrap row/col handles the two-column layout and mobile stacking.
 * ============================================================================= */
.bte-hero {
    background-color: var(--bte-bg);
    background-color: #020D1D;
	display:flex;
	align-items:center;
/* 	min-height:100vh; */
	padding-top: 100px !important;
    padding-bottom: 50px !important
}

/* Large fluid display headline */
.bte-hero__headline {
    font-family: var(--bte-font);
    font-size: clamp(44px, 86.4px, 80px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--bte-white);
}

/* Tagline beneath the headline */
.bte-hero__tagline {
	font-family: var(--bte-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.42em;
	letter-spacing: 1.4px;
	vertical-align: middle;
	text-transform: uppercase;

    color: var(--bte-muted);
    width: auto;
	position:relative;
    display: inline-block;
    background: #13131380;
    border: 1px solid #41474F;
	padding: 6px 16px 6px 40px;
}

.bte-hero__tagline:before {
	position:absolute;
	content:"";
	width:8px;
	height:8px;
	left:20px;
	border-radius:50%;
	top:50%;
	transform:translatey(-50%);
	background:#EC2028;
}


.bte-hero__subheading {
	font-family: var(--bte-font);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.6em;
	letter-spacing: 0px;
	color:#C1C7D0;
	vertical-align: middle;
	border-left: 2px solid #175481;
	padding:8px 0px 8px 24px;

} 


.bte-hero__afterbtn {
	font-family: var(--bte-font);
	font-weight: 700;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 1.2px;
	vertical-align: middle;
	color:#8B919A;
	
}

/* Book cover — deep shadow lifts it off the dark canvas */
.bte-hero__book {
    border-radius: 12px;
    filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.75));
    max-width: 360px;
    margin-inline: auto;
}

img.bte-hero__book.mobile {
	display:none;
}


/* =============================================================================
 * 7. SECTION 3 — VALUE PROPOSITION
 * Alternate dark background.
 * Bootstrap col-sm-6 col-lg-3 handles the 4-column card grid.
 * ============================================================================= */
.bte-value {
    background-color: var(--bte-bg-alt);
    background: #000000;
}

/* Big thesis headline */
.bte-value__headline {
    font-size: clamp(32px, 5vw, 48px);;
	font-family: var(--bte-font);
	font-weight: 700;
	font-size: 48px;
	line-height: 100%;
	letter-spacing: 0%;

}

/* Supporting paragraph */
.bte-value__body,
.bte-value__body p {
    font-size: 20px;
    color: var(--bte-white);
    line-height: 1.5;
}

/* "Who this book is for:" label */
.bte-value__audience-label {
	font-family: var(--bte-font);
	font-size: 24px;
    font-weight: 700;
	line-height: 1.25rem;
	letter-spacing: 0%;
    letter-spacing: 0.04em;
    color: var(--bte-white);
}

/* Individual audience card — overrides Bootstrap's .card defaults */
.bte-audience-card {
    background-color: #FFFFFF1A;
    border: 1px solid #FFFFFF1A;
	backdrop-filter: blur(60px);
/*     border-radius: 12px; */
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all 0.5s;
}

.bte-audience-card:hover {
/*     transform: translateY(-3px); */
/*     border-color: rgba(255, 255, 255, 0.15) !important; */
	border-top:4px solid #EC2028;
}

/* Icon — emoji or SVG, large enough to read at a glance */
.bte-audience-card__icon {
    max-width: 56px;
    height: auto;
    font-size: 1.5rem;
    line-height: 1;
}

/* Card body text — secondary colour, smaller */
.bte-audience-card__text {
	font-family: var(--bte-font);
	font-weight: 600;
	letter-spacing: 0.32px;
	font-size: 16px;
    color: #ffffff;
    line-height: 1.5;
}


/* =============================================================================
 * 8. SECTION 4 — TAKEAWAYS CARD
 * Single dark rounded card, centred, max-width constrained.
 * Bootstrap .row.g-4 inside the card creates the two-column list.
 * Each list item has a red left border (the visual "bullet").
 * ============================================================================= */
.bte-takeaways {
    background-color: var(--bte-bg);
    background: #000000;
}

/* Outer rounded card wrapper */
.bte-takeaways__card {
    /*max-width: 1280px;*/
    margin-inline: auto;
    padding: 3rem;
    background-color: var(--bte-bg-card);
	background-color:#021629C9;
	backdrop-filter: blur(10px)
    border: 1px solid var(--bte-border);
    border-radius: 20px;
}

/* Card heading — centred */
.bte-takeaways__heading {
	font-family: var(--bte-font);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.5px;
	letter-spacing: 0%;
	text-align: center;
}

/* Each list item — red left border acts as the visual bullet */
.bte-takeaways__item {
    padding-left: 1rem;
    border-left: 2px solid var(--bte-red);
    border-radius: 0;      /* never round a single-sided border */
	
	font-family: var(--bte-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5em;
	letter-spacing: 0%;

}


/* =============================================================================
 * 9. SECTION 5 — PULL QUOTE
 * Full-width centred blockquote. Bootstrap justify-content-center handles
 * the column centring; we just set type and colour.
 * ============================================================================= */
.bte-quote {
    background-color: var(--bte-bg-alt);
    background: #000000;
}

.bte-pull-quote {
    font-style: normal; /* reset browser blockquote italic */
	max-width:75%;
	min-width:1056;
	margin:auto;
}

/* Large display-weight quote text */
.bte-pull-quote__text {
    font-family: var(--bte-font);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.16;
    color: var(--bte-white);	
	letter-spacing: -0.96px;
	text-align: center;
}

/* Attribution — small-caps style, muted */
.bte-pull-quote__source {
    display: block;
    text-transform: uppercase;
    color: var(--bte-muted);
	
	font-family: var(--bte-font);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 1.4px;
	text-align: center;
}


/* =============================================================================
 * 10. SECTION 6 — AUTHOR BIO
 * Bootstrap col-lg-4 / col-lg-7 handles the two-column layout.
 * Portrait gets rounded corners; copy column has stacked text elements.
 * ============================================================================= */
.bte-author {
    background-color: var(--bte-bg);
    background-color: #0C1728;
    border: 1px 0px solid #353535;
}

/* Portrait image */
.bte-author__photo {
    border-radius: 0px;
    object-fit: cover;
    aspect-ratio: 1;
}

.bte-author .bte-author__photo.mobile {
	display:none;
}

/* author-bio */
.author-bio {
    padding-left: 3rem;
}



/* Red eyebrow label */
.bte-author__eyebrow {
    color: var(--bte-red);	
	font-family: var(--bte-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 1.4px;
	text-transform: uppercase;

}

/* Author name */
.bte-author__name {
    color: var(--bte-white);	
	font-family: var(--bte-font);
	font-weight: 600;
	font-size: 32px;
	line-height: 40px;
	letter-spacing: -0.32px;
}

/* Role / company line */
.bte-author__role {
    font-family: var(--bte-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #C1C7D0;
}

/* Bio paragraph(s) */
.bte-author__bio p {
	font-family: var(--bte-font);
	font-weight: 400;
	font-size: 16px;
    line-height: 1.5;
	letter-spacing: 0px;
	vertical-align: middle;
    color: var(--bte-muted);
	max-width:600px;

}


/* =============================================================================
 * 11. SECTION 7 — RELATED RESOURCES
 * Bootstrap col-md-4 creates the three-column card grid.
 * We override Bootstrap's .card defaults for the dark theme.
 * ============================================================================= */
.bte-related {
    background-color: var(--bte-bg-alt);
	background-color:#010508;
}

/* "Related" eyebrow above the grid */
.bte-related__eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--bte-muted);
}

/* Card anchor element — extends Bootstrap's .card */
.bte-related-card {
    background-color: var(--bte-bg-card) !important;
    border: 1px solid var(--bte-border) !important;
    border-radius: 12px !important;
    overflow: hidden;
    transition: transform var(--bte-ease), border-color var(--bte-ease);
    color: var(--bte-white); /* anchor inherits colour */
}

.bte-related-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--bte-white);
}

/* Thumbnail wrapper — forces 16:9 aspect ratio */
.bte-related-card__img-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--bte-bg-card);
}

/* Image zooms slightly on card hover */
.bte-related-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.bte-related-card:hover .bte-related-card__img {
    transform: scale(1.05);
}

/* Card body — overrides Bootstrap's .card-body padding */
.bte-related-card__body {
    padding: 1rem 1.25rem 1.5rem !important;
    background-color: var(--bte-bg-card);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Card title */
.bte-related-card__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--bte-white);
    margin: 0;
}

/* Content-type chip */
.bte-related-card__type {
    font-size: 0.75rem;
    color: var(--bte-muted);
    letter-spacing: 0.04em;
}


/* =============================================================================
 * 12. SECTION 8 — CTA BANNER
 * Centred text, Bootstrap justify-content-center handles the column.
 * Subtle radial red glow adds atmosphere without heavy visuals.
 * ============================================================================= */
.bte-cta-banner {
    background-color: var(--bte-bg);
    /* Subtle radial glow — red hue, very low opacity */

    /*background-image: radial-gradient(*/
    /*    ellipse 55% 35% at 50% 65%,*/
    /*    rgba(230, 48, 48, 0.09) 0%,*/
    /*    transparent 70%*/
    /*);*/
    
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
}

/* Closing headline */
.bte-cta-banner__headline {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--bte-white);
    margin-inline: auto;
}


/* =============================================================================
 * 13. SECTION 9 — FOOTER
 * Bootstrap d-flex + justify-content-between handles the three-part layout.
 * ============================================================================= */
.bte-footer {
    background-color: var(--bte-bg);
    border-top: 1px solid var(--bte-border);
}

/* Individual social icon link */
.bte-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 1rem;
    color: var(--bte-muted);
    border-radius: 6px;
    text-decoration: none;
    transition: color var(--bte-ease), background-color var(--bte-ease);
}

.bte-footer__social:hover {
    color: var(--bte-white);
    background-color: rgba(255, 255, 255, 0.07);
}

/* Copyright text */
.bte-footer__copy {
    font-size: 0.75rem;
    color: var(--bte-muted);
}


/* Responsive: reduce card padding on small screens */
@media (max-width: 768px) {
    .bte-takeaways__card {
        padding: 2rem 1.5rem;
    }
	
	.bte-hero__tagline {
		font-size:14px;
	}
	
	.bte-hero__headline {
		font-size:36px;
		text-align:center;
	} 
	
	.bte-hero__subheading {
		font-size:20px;
		line-height:1.4rem;
		text-align:center;
		border:none;
	}
	
	img.bte-hero__book.mobile {
		display:block;
		max-width:65%;
		margin:auto;
	}
	
	img.bte-hero__book.desktop {
		display:none;
	}
	
	.bte-hero__afterbtn {
		font-size:12px;
		
	}
	
	.bte-hero .border-bttn a {
		display:flex;
		justify-content:center;
	}
	
	
/* 	bte-value  */
	.bte-value__headline {
		font-size:32px;
		line-height:1em;
		text-align:center;
	}
	
	.bte-value__body, .bte-value__audience-label {
		font-size:20px;
		line-height:1.12;
		text-align:center;
	}
	
	
/* 	bte-takeaways */

	.bte-takeaways {
		
	}
	
	.bte-takeaways__card.container {
		max-width:unset;
		padding:20px;
	}
	
	.bte-takeaways__heading {
		font-size:20px;
		line-height:1.12;
		text-align:center;
	}
	
	.bte-takeaways__item {
		
	}
	
	.bte-takeaways .bte-btn {
		font-size:14px;
		font-weight:400;
	}

	
/* 	.bte-pull-quote */

	.bte-pull-quote {
		max-width:unset;
		min-width:unset;
	}
	
	
/* 	bte-author bio */
	.bte-author {
		text-align:center;
	}
	
	.bte-author .author-bio {
		display:flex;
		flex-direction:column;
		gap:1rem;
	}
	
	.bte-author .bte-author__photo.desktop {
		display:none;
	}
	
	.bte-author .bte-author__photo.mobile {
		display:block;
		max-width:60%;
		margin:auto;
	}
	
	.bte-cta-banner .border-bttn,
	.bte-cta-banner .bte-btn {
		font-size:14px;
		min-width:unset;
		padding:14px 40px;
	}
	
	
	
	
/* Footer: stack on small screens */
@media (max-width: 576px) {
    .bte-footer .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }
}


/* =============================================================================
 * 14. ACCESSIBILITY & MOTION
 * ============================================================================= */

/* Visible focus ring — red to match brand accent */
:focus-visible {
    outline: 2px solid var(--bte-red);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Honour prefers-reduced-motion — disables all transitions & image scale */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }

    .bte-related-card__img {
        transform: none !important;
    }
}