/*
Theme name: TYP 
Text Domain: TYP
Version: 1.3
Decription: TYP GROUP
Tags: TYPE
Author: LDG Solutions
Author URI: www.ldgsolutions.co.uk
*/

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

header img.custom-logo {
    height: 200px;   /* Desired logo height */
    width: auto;     /* Keep aspect ratio */
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 50px;
    /* max-width: 800px; 
    margin: 10px auto;      */
    min-height: 220px;   /* slightly larger than logo to give spacing */
    min-height: 0px;   /* slightly larger than logo to give spacing */
    background-color: #ffffff;
}



nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav li {
    margin-left: 20px;
}

nav a {
    text-decoration: none;
    color: #1E4D9B; 
    font-weight: bold;
}

/* Hero Banner */
.hero-banner {
    width: 100%;
    height: 400px;
    background: url('https://wpstoragebf290aef8a.blob.core.windows.net/wpblobbf290aef8a/wp-content/uploads/2025/08/shutterstock_1409286710-scaled.jpg') center center/cover no-repeat;    
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1E4D9B;

    text-align: center;
}

.hero-banner h1 {
    font-size: 48px;
    
    padding: 20px;
}

/* WordPress editor content styling */
.content {
    max-width: 900px;       /* limits the width for readability */
    margin: 10px auto;      /* centers the section horizontally and adds vertical spacing */
    padding: 20px 20px;        /* horizontal padding on smaller screens */
  /* center text inside */
    line-height: 1.4;       /* better readability */
    font-size: 15px;        /* comfortable reading size */
    color: #333;            /* standard text color */
    font-family: Arial, sans-serif;
}

.content h2, 
.content h3, 
.content h4 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: #1E4D9B;         /* headings color matches hero banner */
}

.content p {
    margin-bottom: 20px;
}

.content a {
    color: #1E4D9B;          /* link color matches theme */
    text-decoration: none;
}

.content a:hover {
    text-decoration: underline;
}

footer {
    
    background-color: #333;
    color: #fff;
    padding: 20px 20px;
}

.footer-widgets {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.quick-links, .contact-form {
    flex: 1;
    min-width: 250px;
    margin: 10px;
}

.footer-widgets h3 {
    margin-bottom: 20px;
    color: #fff;
}

.footer-menu,
.social-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li,
.social-links li {
    margin-bottom: 10px;
}

.footer-menu a,
.social-links a {
    color: #fff;
    text-decoration: none;
}

.footer-menu a:hover,
.social-links a:hover {
    text-decoration: underline;
}

.social-logo {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 8px;
}



.blog-section {
    padding: 60px 20px;
    background-color: #f9f9f9;
    text-align: center;
}

.blog-section h2 {
    font-size: 36px;
    margin-bottom: 40px;
}

.blog-section .posts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.blog-section .post {
    background: #fff;
    padding: 20px;
    max-width: 300px;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: left;
}

.blog-section .post img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.blog-section .post h3 {
    margin-top: 15px;
    font-size: 22px;
}

.blog-section .post p {
    font-size: 16px;
    margin: 10px 0;
}

.blog-section .read-more,
.blog-section .all-posts-link {
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    color: #1E4D9B;
    font-weight: bold;
}


.blog-archive {
    padding: 60px 20px;
    text-align: center;
}

.blog-archive h1 {
    font-size: 36px;
    margin-bottom: 40px;
}

.blog-archive .posts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.blog-archive .post {
    background: #fff;
    padding: 20px;
    max-width: 300px;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: left;
}

.blog-archive .post img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.blog-archive .post h2 {
    margin-top: 15px;
    font-size: 22px;
}

.blog-archive .post p {
    font-size: 16px;
    margin: 10px 0;
}

.blog-archive .read-more {
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    color: #1E4D9B;
    font-weight: bold;
}


.section-inner  {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 4.5rem 40px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */		
}

.flex-column {
    display: flex; 
    flex-direction: column; 
    align-items:flex-start;
}
.flex-align-middle {
	align-items: center;
}	
.gap-l {
    gap: 3em;
}	
.flex-row {
	display: flex;
	flex-direction: row;	
}
.flex-space-between {
    justify-content: space-between;
}


.event-panel--category {
color: #fff;
background: #000;
display: block;
position: absolute;
top: 15px;
right: 0;
padding: 5px 10px;
font-size: .9em;		
}
/* Base style */
.event-panel--title {
    font-weight: 700;
    font-size: 1.2rem;
    min-height: 50px;
    color: #1E4D9B !important; /* default link color */
}

/* Hover state */
.event-panel--title:hover {
    color: #FF5733 !important; /* change to your desired hover color */
    text-decoration: underline; /* optional: add underline on hover */
}

/* Visited state */
.event-panel--title:visited {
    color: #1E4D9B !important; /* change to your desired visited color */
}

.event-panel--date, .event-panel--location {
text-align:left;
text-transform: uppercase;	
font-size: 14px;
margin-left: 10px;	
}

.divider {
    width: 100%;
    height: 4rem;
    /*height: 0;*/
}
.bg-white {
    background: #fff;
}	
.bg-light {
    background: #eee;
}
.bg-mid {
    background: #ddd;
}
.color-panel {
    width: 90%;
    padding: 1rem;
    margin: 1rem auto;
}
.border-radius {
	border-radius: 15px;
	overflow: hidden;
}
.border-radius-s {
	border-radius: 5px;
	overflow: hidden;
}	
.box-shadow {
	box-shadow:
	  0px 0px 2.2px rgba(0, 0, 0, 0.023),
	  0px 0px 5.3px rgba(0, 0, 0, 0.035),
	  0px 0px 10px rgba(0, 0, 0, 0.045),
	  0px 0px 17.9px rgba(0, 0, 0, 0.056),
	  0px 0px 33.4px rgba(0, 0, 0, 0.07),
	  0px 0px 80px rgba(0, 0, 0, 0.1)
;
}
.width-30 {
width: 30%;
}