/* FILE: style.css - PATH: /system/style/style.css */

/* ===== ROOT / THEMA VARIABELEN ===== */
:root{
--color-green:#41AA2D;
--color-blue:#0A5AC3;
--color-orange:#FF5F05;
--color-silver:#C0C0C0;
/*
  --color-gold:#C9A227;
--color-gold-light:#E0B94A;
--color-gold-mid:#B08E1F;
--color-gold-dark:#8A6B17;
*/
--color-background:#FFFFFF;
--color-surface:#FFFFFF;
--color-text:#1A1A1A;
--color-text-inverse:#FFFFFF;
--color-border:#D0D6DD;

--color-primary:var(--color-green);
--color-secondary:var(--color-green);
--color-accent:var(--color-orange);
--color-hover:var(--color-orange);

--shadow-soft:0 4px 12px rgba(0,0,0,0.08);

color-scheme: light dark;
}

/* ===== DARK MODE ===== */
@media (prefers-color-scheme: dark){
:root:not(.force-light){
--color-background:#000000;
--color-surface:#323841;
--color-text:#E6EDF3;
--color-border:#3F4650;
--shadow-soft:0 4px 12px rgba(0,0,0,0.6);
}
}

:root.force-dark{
--color-background:#000000;
--color-surface:#323841;
--color-text:#E6EDF3;
--color-border:#3F4650;
--shadow-soft:0 4px 12px rgba(0,0,0,0.6);
}

/* ===== BASIS ===== */
html,body{
height:100%;
}

body{
margin:0;
padding:0;
background:var(--color-background);
color:var(--color-text);
font-family:system-ui,-apple-system,Arial,Helvetica,sans-serif;
display:flex;
flex-direction:column;
}

/* ===== STRUCTUUR ===== */
main{
flex:1;
display:flex;
flex-direction:column;
padding:0.5rem 0;
}

.container{
width:90%;
max-width:1100px;
margin:0 auto;
flex:1;
display:flex;
flex-direction:column;
}

.header-container{
padding:0;
flex:none;
}

/* ===== TYPOGRAFIE ===== */
.site-name-centered{
font-family:"Times New Roman",serif;
font-size:60px;
line-height:1;
font-weight:600;
letter-spacing:3px;
text-align:center;
}

.gold-text{
background:linear-gradient(
to bottom,
var(--color-gold-light) 0%,
var(--color-gold) 45%,
var(--color-gold-mid) 70%,
var(--color-gold-dark) 100%
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-shadow:
0 -1px 0 rgba(255,215,120,0.25),
0 1px 0 rgba(120,90,20,0.5),
0 2px 4px rgba(0,0,0,0.25);
}

.page-title{
margin-top:0;
text-align:center;
}

.page-title h1{
margin:0 0 0.5rem 0;
}

/* ===== LAYOUT ===== */
.layout{
flex:1;
display:flex;
gap:1.5rem;
align-items:stretch;
}

/* ===== CONTENT ===== */
.content{
flex:1;
min-width:0;
position:relative;
z-index:1;
}

.content-header{
text-align:center;
padding:1rem 1.5rem;
background:var(--color-surface);
border-radius:8px;
box-shadow:var(--shadow-soft);
margin-bottom:2rem;
position:relative;
}

.content-header::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:calc(-1rem - 2px);
height:2px;
background:var(--color-blue);
border-radius:2px;
}

.content-body{
background:var(--color-surface);
padding:1.5rem;
border-radius:8px;
box-shadow:var(--shadow-soft);
}

/* ===== OVERLAY (CENTRAAL GEMAAKT) ===== */
.content-body.overlay-mode{
position:relative;
color:#fff;
padding:0;
box-shadow:none;
background:none;
font-weight:700;
}

/* centrale afbeelding */
.content-body.overlay-mode img{
display:block;
width:100%;
height:auto;
border-radius:8px;
}

/* overlay container */
.content-overlay{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:flex-start;
padding:2rem;

text-shadow:
0 1px 2px rgba(0,0,0,0.9),
0 2px 6px rgba(0,0,0,0.8),
0 0 12px rgba(0,0,0,0.6);
}

/* overlay centered variant */
.content-overlay.center{
justify-content:center;
text-align:center;
flex-direction:column;
}

/* overlay tekst blok */
.overlay-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
width:90%;
max-width:600px;
padding:1.5rem;
}

/* ===== BLOKKEN ===== */
.welcome-block{
max-width:600px;
}

.intro-text{
text-align:center;
margin-top:1rem;
}

/* ===== ACTIES ===== */
.content-actions{
margin-top:2rem;
display:flex;
gap:0.6rem;
flex-wrap:wrap;
justify-content:center;
}

.content-actions.center{
justify-content:center;
}

/* ===== BUTTONS ===== */
.action-button{
display:inline-block;
padding:0.5rem 0.9rem;
background:var(--color-green);
color:var(--color-text-inverse);
text-decoration:none;
border-radius:8px;
font-weight:bold;
font-size:0.85rem;
border:none;
font-family:inherit;
cursor:pointer;
appearance:none;
}

.action-button:hover{
background:var(--color-blue);
color:var(--color-text-inverse);
}

.action-button:active{
background:var(--color-blue);
color:var(--color-orange);
}

/* ===== FOOTER ===== */
.site-footer{
flex:0 0 auto;
background:transparent;
margin-top:0;
padding:0;
color:var(--color-silver);
}

.footer-content{
border-top:2px solid var(--color-blue);
padding-top:0.1rem;
display:flex;
justify-content:center;
text-align:center;
font-size:0.9rem;
}

/* ===== FORM ELEMENTEN ===== */
input,
textarea,
select{
display:block;
width:100%;
padding:0.5rem;
background:rgba(0,0,0,0.05);
color:var(--color-text);
border:1px solid var(--color-border);
border-radius:4px;
font-family:inherit;
font-size:inherit;
box-sizing:border-box;
}

@media (prefers-color-scheme: dark){
input, textarea, select{
background:rgba(255,255,255,0.15);
}
}

:root.force-dark input,
:root.force-dark textarea,
:root.force-dark select{
background:rgba(255,255,255,0.15);
}

input::placeholder,
textarea::placeholder{
color:#666666;
}

input:focus,
textarea:focus,
select:focus{
outline:none;
border-color:var(--color-blue);
box-shadow:0 0 0 2px rgba(10,90,195,0.15);
}

/* ===== FORM STRUCTUUR ===== */
.form-group{
margin-bottom:1rem;
}

.form-group label{
display:block;
margin-bottom:0.3rem;
font-size:0.85rem;
}

/* ===== TOEGANKELIJKHEID ===== */
:focus{
outline:2px solid var(--color-blue);
outline-offset:2px;
}