/*
Theme Name: IPSTRA Theme
Description: Classic framed layout with logo header (no sidebar).
Version: 2.2
*/

/* ==============================
BRAND COLORS
============================== */
:root{
--brand-primary: #101585;      /* NAVY */
--brand-hover: #1F2BCC;
--text-main: #444444;
--text-muted: #777777;
--border-light: #eeeeee;
}

/* ==============================
GOOGLE FONT – INTER
Must be at the top of the file
============================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');



/* ==============================
BASE
============================== */
html, body{
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.6;
color: var(--text-main);
background-color: #ffffff;
overflow-x: hidden;
}

#container2, #container2 *{
box-sizing: border-box;
}

/* ==============================
MAIN FRAME
============================== */
#container2{
width: 900px;
max-width: 100%;
margin: 0 auto 40px auto;
border: 6px solid var(--brand-primary);
background-color: #ffffff;
overflow: hidden;
}

/* ==============================
HEADER
============================== */
#header{
padding: 6px 30px 4px 30px;
border-bottom: 3px solid var(--brand-primary);
}

/* Logo replacement: keep text for SEO/accessibility, show logo as background */
#header h1{
  margin: 0;
  display: block;
  width: 300px;
  height: 90px;
  background-image: url('/wp-content/uploads/2026/03/IPSTRA-logo-blue.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

/* Adds the ™ after the logo */
#header h1::after{
content: "™";
position: absolute;
top: 10px;
left: 295px;
font-size: 14px;
line-height: 1;
color: var(--brand-primary);
}

#header p{
margin: 5px 0 0 3px;
color: #999999;
}

/* ==============================
TOP NAV
============================== */
#tabs{
background-color: var(--brand-primary);
padding: 0 30px;
}

#tabs ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}

#tabs li{
margin: 0;
padding: 0;
}

#tabs a{
display: block;
padding: 10px 16px;
text-decoration: none;
color: #ffffff;
font-size: 13px;
}

#tabs a:hover{
background-color: var(--brand-hover);
}

#tabs a.active{
background-color: #ffffff;
color: var(--brand-primary);
font-weight: bold;
border-top: 3px solid #ffffff;
}

/* ==============================
LAYOUT (NO SIDEBAR)
============================== */
#sidebar{
display: none;
}

#content{
float: none;
width: 100%;
padding: 20px 30px 30px 30px;
overflow-wrap: anywhere;
word-break: break-word;
}

/* Ensure media never overflows */
img, table, pre{
max-width: 100%;
}

/* ==============================
FOOTER
============================== */
#footer{
clear: both;
background-color: var(--brand-primary);
color: #ffffff;
padding: 8px 10px;
text-align: center;
font-size: 12px;
}

/* ==============================
TYPOGRAPHY & BUTTONS
============================== */
h2{
color: var(--brand-primary);
font-size: 20px;
margin-top: 0;
}

a{
color: var(--brand-primary);
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

.button{
display: inline-block;
background-color: var(--brand-primary);
color: #ffffff !important;
padding: 8px 16px;
font-size: 13px;
border-radius: 3px;
border: 1px solid var(--brand-primary);
margin-right: 8px;
}

.button:hover{
background-color: var(--brand-hover);
}

/* ==============================
RESPONSIVE
============================== */
@media (max-width: 920px){
#content{
padding: 20px;
}

#tabs{
padding: 0 20px;
}

#header{
padding: 6px 20px 4px 20px;
}
}

/* ==============================
PRINT
============================== */
@media print{
body{
background: #ffffff;
color: #000000;
overflow-x: visible;
}

#container2{
width: 100%;
max-width: 100%;
border: none;
overflow: visible;
}

#tabs, #footer{
display: none;
}

#content{
float: none;
width: auto;
padding: 0;
}

a{
color: #000000;
text-decoration: none;
}
}

/* ==============================
SERVICES PAGE: match Engagements styling
============================== */

.services-section-title{
margin-top: 20px;
}

/* Intro text under each section title */
.services-section-intro{
font-size: 13px;
margin: 0 0 14px 0;
color: #444444;
}

/* Grid layout (same idea as Engagements) */
.services-grid{
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 20px;
}

.service-item{
flex: 1 1 48%;
min-width: 260px;
padding: 6px 0 12px 0;
}

/* Blue title (same as Engagements) */
.service-title{
font-weight: bold;
color: #101585;
font-size: 14px;
margin-bottom: 3px;
}

/* Grey text under title (same as Engagements) */
.service-desc{
font-size: 12px;
color: #777777;
line-height: 1.6;
}

.services-divider{
border-top: 1px solid #cccccc;
margin: 25px 0 10px 0;
width: 100%;
}



/* ==============================
TYPOGRAPHY & LAYOUT MODERNISATION
============================== */

/* Modern base typography */
html, body {
font-family: "Inter", Arial, sans-serif;
font-size: 15px;
line-height: 1.65;
}

/* Improve reading width balance */
#content {
max-width: 760px;
margin: 0 auto;
}

/* Stronger section hierarchy */
h2 {
font-size: 22px;
margin-top: 32px;
margin-bottom: 12px;
font-weight: 600;
}

/* Prevent large gap if first element is h2 */
#content h2:first-child {
margin-top: 0;
}

/* Improve paragraph rhythm */
p {
margin-bottom: 14px;
}

/* Improve bullet spacing */
ul {
margin-top: 8px;
margin-bottom: 18px;
}

li {
margin-bottom: 6px;
}

/* Slightly stronger buttons */
.button {
font-weight: 500;
}


/* ==============================
FIX: Services + Engagements font-size mismatch
(Overrides inline template styles)
============================== */

/* Ensure the base size is consistent inside these templates */
body.page-template-page-services #content,
body.page-template-page-engagements #content {
font-size: 1rem; /* = your html font-size (15px if you set it) */
}

/* Section intro blocks (inline font-size:13px) -> normal body size */
body.page-template-page-services #content [style*="font-size:13px"],
body.page-template-page-engagements #content [style*="font-size:13px"] {
font-size: 1rem !important;
line-height: 1.65 !important;
}

/* Meta text blocks (inline font-size:12px) -> slightly smaller, but not tiny */
body.page-template-page-services #content [style*="font-size:12px"],
body.page-template-page-engagements #content [style*="font-size:12px"] {
font-size: 0.95rem !important; /* ~14.25px if base is 15px */
line-height: 1.6 !important;
}

/* Titles (inline font-size:14px) -> match modern hierarchy */
body.page-template-page-services #content [style*="font-size:14px"],
body.page-template-page-engagements #content [style*="font-size:14px"] {
font-size: 1.05rem !important; /* ~15.75px */
font-weight: 600 !important;
}

/* Keep lists consistent */
body.page-template-page-services #content ul,
body.page-template-page-engagements #content ul {
margin-top: 8px;
margin-bottom: 18px;
}

body.page-template-page-services #content li,
body.page-template-page-engagements #content li {
margin-bottom: 6px;
}

/* ==============================
MOBILE TEXT SIZE FIX
Prevents iOS/Android browsers from shrinking
or enlarging text when rotating the device
or changing viewport width.
============================== */

html{
  -webkit-text-size-adjust: 100%; /* iOS Safari / Chrome */
  -moz-text-size-adjust: 100%;    /* Firefox Mobile */
  -ms-text-size-adjust: 100%;     /* old Microsoft mobile browsers */
  text-size-adjust: 100%;         /* standard property */
}