/* ======================================================
Parsons Paint and Print
MASTER STYLESHEET
Last Updated: 16-06-2026
====================================================== */

/* ======================================================
GLOBAL ELEMENTS
====================================================== */

/* ======================================================
GLOBAL ELEMENTS - PAGE ELEMENTS
====================================================== */

html{
scroll-behavior:smooth;
}

body{
font-family:Arial,Helvetica,sans-serif;
background:#ffffff;
color:#222222;
line-height:1.6;
}



/* ======================================================
GLOBAL ELEMENTS - IMAGES
====================================================== */

img{
max-width:100%;
height:auto;
display:block;
}

a{
transition:.3s ease;
}

/* ======================================================
GLOBAL ELEMENTS - CONTAINERS
====================================================== */

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

.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}

section{
width:100%;
}

/* ======================================================
GLOBAL ELEMENTS - SPACERS
====================================================== */

.spacer-lg{
height:20px;
}

.spacer{
height:10px;
}

.spacer-sm{
height:3px;
}

/* ======================================================
ACCESSIBILITY
Standard #E49411 = rgba(228,148,17,100) 
Hover #f19e0c = rgba(241,158,12,100)
====================================================== */

a:focus,
button:focus,
input:focus,
textarea:focus{
outline:2px solid rgba(241,158,12,100);
box-shadow:0 0 24px rgba(241,158,12,.6);
outline-offset:6px;
}

/* ======================================================
HEADER
====================================================== */

header{
background:#000000;
position:sticky;
top:0;
z-index:9999;
}

.header-inner{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 0;
gap:20px;
}

/* ======================================================
HEADER LOGO
====================================================== */

.logo{
height:90px;
transition:transform .3s ease;
}

.logo:hover{
transform:scale(1.1);
}

/* ======================================================
NAVIGATION
====================================================== */

.menu-toggle{
display:none;
font-size:30px;
color:#ffffff;
cursor:pointer;
background:none;
border:none;
}


nav{
display:flex;
gap:18px;
}

nav a{
color:#ffffff;
font-size:16px;
text-decoration:none;
font-weight:bold;
position:relative;
}

nav a:hover,
nav a.active{
color:#E49411;
}

nav a::after{
content:"";
position:absolute;
left:0;
bottom:-5px;
width:0;
height:2px;
background:#E49411;
transition:.3s;
}

nav a:hover::after,
nav a.active::after{
width:100%;
}

/* ======================================================
HERO
====================================================== */

.hero{
position:relative;
overflow:hidden;
background:url("../img/hero/ppp_hero.webp") center center/cover no-repeat;
color:#ffffff;
text-align:center;
padding:80px 20px;
}

.hero::before{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,.45);
}

.hero .container{
position:relative;
z-index:2;
}

/* ======================================================
BUTTONS
====================================================== */
/* ======================================================
Standard #E49411 = rgba(228,148,17,100) 
Hover #f19e0c = rgba(241,158,12,100)
====================================================== */

.button{
display:inline-block;
background:#E49411;
color:#ffffff;
padding:12px 20px;
border:2px solid #E49411;
border-radius:6px;
text-decoration:none;
font-weight:bold;
transition:.3s;
}

.button:hover{
background:#f19e0c;
color:#ffffff;
padding:12px 20px;
border:2px solid #f19e0c;
border-radius:6px;
box-shadow:0 20px 20px rgba(0,0,0,.3);
text-decoration:none;
font-weight:bold;
transform:translateY(-6px);
}

/* ======================================================
GRID SYSTEM
====================================================== */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
padding:20px 0;
}

/* ======================================================
CARDS
====================================================== */

.card{
background:#ffffff;
border:2px solid #cccccc;
border-radius:6px;
padding:20px;
text-align:center;
transition:.3s;
}

.card:hover{
transform:translateY(-5px);
box-shadow:0 10px 20px rgba(0,0,0,.15);
}

.card img{
border:2px solid #ffffff;
border-radius:6px;
margin:auto;
transition:transform .3s ease;
}

.card:hover img{
transform:scale(1.1);
}

/* ======================================================
LOGO ROW
====================================================== */

.logo-row{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:50px;
background:#ffffff;
border:2px solid #cccccc;
padding:6px;
border-radius:6px;

}

.logo-row img{
display:inline-block;
border:2px solid #E49411;
width:120px;
height:120px;
transition:transform .3s ease;
opacity:.85;
}

.logo-row img:hover{
transform:scale(1.1);
opacity:1;
}

/* ======================================================
GALLERY
====================================================== */
/* ======================================================
Standard #E49411 = rgba(228,148,17,100) 
Hover #f19e0c = rgba(241,158,12,100)
====================================================== */

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
padding:40px 0;
}

.gallery-item{
position:relative;
border:2px solid #ffffff;
border-radius:6px;
overflow:hidden;
background:#ffffff;
transition:.3s ease;
}

.gallery-item img{
width:100%;
height:260px;
object-fit:cover;
cursor:pointer;
transition:transform .6s ease;
}

.gallery-item:hover img{
transform:scale(1.1);
}

/* ======================================================
GALLERY THUMBS
====================================================== */

.gallery-thumbs{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:30px;
}

.gallery-thumb{
width:100px;
height:100px;
object-fit:cover;
cursor:pointer;
border:2px solid #ffffff;
border-radius:6px;
box-shadow:0 0 30px rgba(255,255,255,.1);
outline:2px solid rgba(255,255,255,.1);
outline-offset:6px;
transition:.3s;
opacity:.5;
flex-shrink:0;
}

.gallery-thumb:hover{
transform:scale(1.1);
opacity:1;
border:2px solid rgba(241,158,12,.5);
outline:2px solid rgba(241,158,12,100);
box-shadow:0 0 30px rgba(241,158,12,100);
outline-offset:9px;
}

.active-thumb{
opacity:1;
border:2px solid rgba(12,125,0,.5);
outline:2px solid rgba(12,125,0,100);
box-shadow:0 0 30px rgba(12,125,0,100);
outline-offset:3px;
}

.gallery-thumb-block{
margin-top:20px;
background:#ffffff;
border:2px solid #cccccc;
border-radius:6px;
padding:20px;
}

/* ======================================================
GALLERY VIEWER
====================================================== */

.gallery-viewer{
width:100%;
display:flex;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
justify-content:center;
align-items:center;
padding:30px;
}

#main-gallery-image{
display:block;
width:100%;
max-width:450px;
height:auto;
padding:0px;
cursor:pointer;
border-radius:6px;
box-shadow:0 10px 20px rgba(0,0,0,.15);
object-fit:cover;
transition:transform .3s ease;
}

#main-gallery-image:hover{
transform:scale(1.1);
}

/* ======================================================
INFORMATION PAGES
====================================================== */

.information-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(450px,1fr));
gap:20px;

align-items:start;
}

.information-item{
position:relative;
padding:20px;
border:2px solid #cccccc;
border-radius:6px;
overflow:hidden;
background:#ffffff;
transition:.3s;
box-shadow:0 10px 20px rgba(0,0,0,.15);
}

.information-item img{
width:100%;
height:450px;
object-fit:cover;
cursor:pointer;
transition:transform .3s ease;
}

.information-item:hover img{
transform:scale(1.1);
}

.information-block{
position:relative;
height:505px;
padding:20px;
color:#000000;
border-radius:6px;
background:#ffffff;
text-align:left;
font-size:14px;
font-weight:normal;
line-height:2.0;
}

/* ======================================================
BADGES
====================================================== */
/* ======================================================
Standard #E49411 = rgba(228,148,17,100) 
Hover #f19e0c = rgba(241,158,12,100)
====================================================== */

.badge{
position:absolute;
top:10px;
left:10px;
color:#ffffff;
padding:4px 8px;
border-radius:6px;
font-size:11px;
text-decoration:none;
font-weight:bold;
z-index:5;
}

/* ======================================================
NEW PRODUCT BADGE
====================================================== */

.new{
background:#0c7d00;
border:2px solid #0c7d00;
}

/* ======================================================
BEST SELLER BADGE
====================================================== */

.best{
background:#7a0099;
border:2px solid #7a0099;
}

/* ======================================================
SIZE BADGE
====================================================== */

.size{
position:absolute;
bottom:42px;
right:10px;
background:#112222;
color:#ffffff;
padding:4px 8px;
border-radius:6px;
border:2px solid #000000;
font-size:11px;
text-decoration:none;
font-weight:bold;
z-index:5;
}

/* ======================================================
PRICE AND SOLD BADGE
====================================================== */

.price,
.sold{
position:absolute;
bottom:10px;
right:10px;
color:#ffffff;
padding:4px 8px;
border-radius:6px;
font-size:11px;
text-decoration:none;
font-weight:bold;
z-index:5;
}

.price{
background:#000000;
border:2px solid #000000;
}

.sold{
background:#8b0000;
border:2px solid #8b0000;
}

/* ======================================================
CUSTOM BADGE
====================================================== */

.custom{
background:#0ba9ab;
border:2px solid #0ba9ab;
}

/* ======================================================
INFO BADGE
====================================================== */

.info{
background:#ff8400;
border:2px solid #ff8400;
}

/* ======================================================
MORE INFORMATION PAGE LINK BADGE
====================================================== */

.more-info{
position:absolute;
bottom:10px;
left:70px;
background:#4169E1;
color:#ffffff;
padding:4px 8px;
border-radius:6px;
border:2px solid #fff;
font-size:11px;
text-decoration:none;
font-weight:bold;
z-index:5;
}

.more-info:hover{
background:#0041c2;
transform:translateY(-2px);
}

/* ======================================================
EMAIL IMAGE
====================================================== */

.emailbadge{
display:inline-block;
background:#ffffff;
color:#ffffff;
padding:12px 20px;
border:2px solid #ffffff;
border-radius:6px;
text-decoration:none;
font-weight:bold;
transition:.3s ease;
}

.emailbadge:hover{
color:#ffffff;
padding:12px 20px;
border:2px solid #f19e0c;
border-radius:6px;
box-shadow:0 0 30px rgba(241,158,12,100);
text-decoration:none;
font-weight:bold;
transition:.3s ease;
transform:scale(1.1);

}

/* ======================================================
ETSY BADGE
====================================================== */

.etsy-link{
position:absolute;
bottom:10px;
left:10px;
background:#E49411;
color:#ffffff;
padding:4px 8px;
border-radius:6px;
border:2px solid #fff;
font-size:11px;
text-decoration:none;
font-weight:bold;
z-index:5;
}

.etsy-link:hover{
background:#f19e0c;
transform:translateY(-2px);
}

/* ======================================================
CONTENT BLOCKS
====================================================== */
/* ======================================================
Standard #E49411 = rgba(228,148,17,100) 
Hover #f19e0c = rgba(241,158,12,100)
====================================================== */

.block,
.block-whitebg,
.block-return,
.block-thanks,
.block-info{
border-radius:6px;
padding:20px;
}

.block{
background:#f5f5f5;
border:2px solid #cccccc;
box-shadow:0 10px 20px rgba(0,0,0,.15);
}

.block-whitebg{
background:#ffffff;
border:2px solid #cccccc;
box-shadow:0 10px 20px rgba(0,0,0,.15);
}

.block-return{
background:#ffffff;
border:2px solid #fff;
text-align:center;
}

.block-thanks{
background:#ffffff;
border:2px solid #E49411;
text-align:center;
}

.block-thanks:hover{
transform:scale(1.1);
box-shadow:0 10px 20px rgba(0,0,0,.15);
}

.block-info{
background:#ffffff;
border:2px solid #cccccc;
box-shadow:0 10px 20px rgba(0,0,0,.15);
}

/* ======================================================
SOCIALS
====================================================== */
/* ======================================================
Standard #E49411 = rgba(228,148,17,100) 
Hover #f19e0c = rgba(241,158,12,100)
====================================================== */

/* ======================================================
SOCIAL SECTION
====================================================== */

.social-section{
text-align:center;
padding:20px 20px;
}

/* ======================================================
SOCIAL ICONS
====================================================== */

.social-icons{
display:flex;
align-items:center;
justify-content:center;
gap:20px;
padding:5px 0;
margin:auto;
}

.social-icons img{
width:54px;
height:54px;
max-width:54px;
max-height:54px;
display:block;
transition:.3s;
opacity:.8;
flex-shrink:0;
}

.social-icons img:hover{
transform:translateY(-12px);
opacity:1;
border:2px solid #f19e0c;
border-radius:6px;
box-shadow:0 0 24px rgba(228,148,17,100);
}

/* ======================================================
SOCIALS FOOTER
====================================================== */

.footer-socials{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
padding:5px 0;
margin:20px 0;
}

.footer-socials img{
width:40px;
height:40px;
max-width:40px;
max-height:40px;
display:block;
transition:.3s;
opacity:.6;
flex-shrink:0;
}

.footer-socials img:hover{
transform:translateY(-12px);
opacity:1;
border:2px solid #f19e0c;
border-radius:6px;
box-shadow:0 20px 40px rgba(228,148,17,100);
}

/* ======================================================
SOCIAL LINKS
====================================================== */
/* ======================================================
Standard #E49411 = rgba(228,148,17,100) 
Hover #f19e0c = rgba(241,158,12,100)
====================================================== */

.social-links{
margin-top:20px;
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.social-links a{
color:#ffffff;
text-decoration:none;
font-weight:bold;
}

.social-links a:hover{
color:#E49411;
}

/* ======================================================
SOCIAL BUTTON
====================================================== */
/* ======================================================
Standard #E49411 = rgba(228,148,17,100) 
Hover #f19e0c = rgba(241,158,12,100)
====================================================== */

.social-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
margin-top:4px;
}

.social-button{
display:inline-block;
padding:4px 8px;
border-radius:6px;
font-weight:bold;
text-decoration:none;
color:#ffffff;
transition:.3s;
}

.social-button:hover{
transform:translateY(-2px);
}

/* ======================================================
SOCIAL COLOURS
====================================================== */

.instagram{background:#E1306C;}
.threads{background:#008080;}
.pinterest{background:#BD081C;}
.x{background:#000000;}

/* ======================================================
CTA
====================================================== */

.cta{
background:#f5f5f5;
text-align:center;
padding:60px 20px;
}

/* ======================================================
FORMS
====================================================== */

form{
max-width:700px;
margin:30px auto;
}

form input,
form textarea{
width:100%;
padding:12px;
border:2px solid #cccccc;
border-radius:6px;
margin-bottom:15px;
font-size:16px;
}

form textarea{
min-height:140px;
}

/* ======================================================
FOOTER
====================================================== */

footer{
background:#222222;
color:#ffffff;
text-align:center;
padding:20px 20px;
margin-top:20px;
}

/* ======================================================
FOOTER NAVIGATION
====================================================== */
/* ======================================================
Standard #E49411 = rgba(228,148,17,100) 
Hover #f19e0c = rgba(241,158,12,100)
====================================================== */

.footer-nav{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:20px;
margin:20px 0;
}

.footer-nav a{
color:#ffffff;
text-decoration:none;
font-weight:bold;
position:relative;
}

.footer-nav a:hover,
.footer-nav a.active{
color:#E49411;
}

.footer-nav a::after{
content:"";
position:absolute;
left:0;
bottom:-4px;
width:0;
height:2px;
background:#E49411;
transition:.3s;
}

.footer-nav a:hover::after,
.footer-nav a.active::after{
width:100%;
}

/* ======================================================
LIGHTBOX
====================================================== */

.lightbox{
display:none;
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
inset:0;
background:rgba(0,0,0,.96);
justify-content:center;
align-items:center;
z-index:9999;
padding:60px;
cursor:pointer;
}

#lightbox-img{
max-width:90%;
max-height:90%;
border-radius:6px;
box-shadow:0 0 30px rgba(0,0,0,.96);
}

.close{
position:absolute;
top:30px;
right:450px;
font-size:60px;
color:#E49411;
cursor:pointer;
}

/* ======================================================
REDUCED MOTION
====================================================== */

@media(prefers-reduced-motion:reduce){

*{
animation:none!important;
transition:none!important;
scroll-behavior:auto!important;
}

}

/* ======================================================
MOBILE
====================================================== */

@media(max-width:768px){

.menu-toggle{
display:block;
}

nav{
flex-direction:column;
width:100%;
max-height:0;
overflow:hidden;
background:#000000;
transition:.4s;
}

nav.active{
max-height:800px;
}

nav a{
padding:12px 0;
text-align:center;
}

.hero h1{
font-size:32px;
}

.hero p,
.hero-text{
font-size:20px;
}

.footer-nav{
flex-direction:column;
gap:12px;
}

.footer-nav{
padding:0 10px;
}

.header-inner{
flex-direction:column;
}

.social-icons{
margin-top:15px;
margin-left:0;
}

.social-icons{
width:100%;
justify-content:center;
margin-top:10px;
margin-bottom:10px;
}

.logo{
height:70px;
}

.lightbox{
display:none;
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
inset:0;
background:rgba(0,0,0,.96);
justify-content:center;
align-items:center;
z-index:9999;
padding:60px;
cursor:pointer;
}

.lightbox-img{
max-width:90%;
max-height:90%;
border-radius:6px;
box-shadow:0 0 30px rgba(0,0,0,.96);
}

.close{
position:absolute;
top:20px;
right:60px;
font-size:40px;
color:#E49411;
cursor:pointer;
}
.information-grid{
grid-template-columns:1fr;
}
}