/* =========================================================
APENSIA ULTIMATE LAYOUT SYSTEM (AULS v1.0)
Global Responsive + SEO + Performance Framework
========================================================= */


/* =========================================================
1. DESIGN TOKENS (SITE DNA)
========================================================= */

:root{

/* Layout */
--ap-max-width:1200px;
--ap-content-width:900px;
--ap-padding:clamp(16px,4vw,28px);
--ap-section-space:clamp(70px,9vw,120px);

/* Radius */
--ap-radius-sm:12px;
--ap-radius-md:18px;
--ap-radius-lg:28px;

/* Colors */
--ap-primary:#0a84ff;
--ap-dark:#0f172a;
--ap-text:#475569;
--ap-light:#f8fafc;
--ap-border:#e2e8f0;

/* Shadows */
--ap-shadow-sm:0 10px 25px rgba(0,0,0,.05);
--ap-shadow-md:0 20px 45px rgba(0,0,0,.08);

}



/* =========================================================
2. GLOBAL RESET (ANTI OVERFLOW SYSTEM)
========================================================= */

*,
*::before,
*::after{
box-sizing:border-box;
margin:0;
padding:0;
}

html,body{
width:100%;
max-width:100%;
overflow-x:hidden;
font-family:'Inter',system-ui,-apple-system,sans-serif;
background:#ffffff;
color:var(--ap-dark);
line-height:1.6;
}

/* Media safety */
img,
video,
iframe{
max-width:100%;
height:auto;
display:block;
}



/* =========================================================
3. MASTER PAGE WRAPPER
========================================================= */

.ap-page,
.apensia-page{
width:100%;
overflow:hidden;
position:relative;
}



/* =========================================================
4. SECTION SYSTEM
========================================================= */

.ap-section{
width:100%;
padding-block:var(--ap-section-space);
position:relative;
}



/* =========================================================
5. CONTAINER SYSTEM (CRITICAL FIX)
========================================================= */

.ap-container{
width:100%;
max-width:var(--ap-max-width);
margin-inline:auto;
padding-inline:var(--ap-padding);
}

.ap-container-sm{
max-width:var(--ap-content-width);
margin-inline:auto;
padding-inline:var(--ap-padding);
}

/* True full-width sections */
.ap-full{
width:100vw;
margin-left:50%;
transform:translateX(-50%);
}



/* =========================================================
6. TYPOGRAPHY SCALE (SEO OPTIMIZED)
========================================================= */

h1{
font-size:clamp(2rem,5vw,3.2rem);
font-weight:900;
line-height:1.15;
}

h2{
font-size:clamp(1.8rem,4vw,2.6rem);
font-weight:800;
line-height:1.2;
}

h3{
font-size:clamp(1.2rem,2.5vw,1.5rem);
font-weight:700;
}

p{
font-size:clamp(.95rem,1.2vw,1.1rem);
color:var(--ap-text);
line-height:1.7;
}



/* =========================================================
7. SMART GRID SYSTEM (AUTO RESPONSIVE)
========================================================= */

.ap-grid{
display:grid;
gap:clamp(20px,3vw,32px);
grid-template-columns:
repeat(auto-fit,minmax(min(100%,280px),1fr));
}

.ap-grid-2{
display:grid;
gap:clamp(20px,3vw,32px);
grid-template-columns:
repeat(auto-fit,minmax(min(100%,480px),1fr));
}



/* =========================================================
8. UNIVERSAL CARD SYSTEM
========================================================= */

.ap-card{
background:#ffffff;
padding:clamp(24px,3vw,36px);
border-radius:var(--ap-radius-md);
border:1px solid var(--ap-border);
box-shadow:var(--ap-shadow-sm);
transition:.35s ease;
}

.ap-card:hover{
transform:translateY(-8px);
box-shadow:var(--ap-shadow-md);
}



/* =========================================================
9. BUTTON SYSTEM
========================================================= */

.ap-btn{
display:inline-block;
padding:14px 32px;
border-radius:50px;
background:var(--ap-primary);
color:#fff;
font-weight:700;
text-decoration:none;
transition:.3s;
}

.ap-btn:hover{
transform:translateY(-2px);
box-shadow:0 12px 25px rgba(10,132,255,.25);
}



/* =========================================================
10. BACKGROUND UTILITIES
========================================================= */

.bg-light{
background:var(--ap-light);
}

.bg-dark{
background:var(--ap-dark);
color:#ffffff;
}

.bg-gradient{
background:linear-gradient(180deg,#ffffff,#f8fafc);
}



/* =========================================================
11. HEADER + BOOTSTRAP OVERFLOW FIX
========================================================= */

header,
#site-header{
width:100%;
max-width:100vw;
overflow:hidden;
}

.container,
.container-fluid{
max-width:100%;
padding-left:var(--ap-padding);
padding-right:var(--ap-padding);
}



/* =========================================================
12. MOBILE OPTIMIZATION
========================================================= */

@media(max-width:768px){

.ap-section{
padding-block:60px;
}

.ap-card{
padding:22px;
}

}



/* =========================================================
13. ULTRA SMALL DEVICES (iPhone SE FIX)
========================================================= */

@media(max-width:420px){

body{
font-size:15px;
}

.ap-container{
padding-inline:14px;
}

}