/* CSS Document */


body { color: #555;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 16px !important; 
  font-weight: 300 !important; 
  margin: 0; 
  padding: 0 !important;
  line-height: 27px !important;  }

#page { max-width: 1200px; margin: 0 auto; position: relative; }

/* Text 
====================================================================*/

h1 { font-size: 24px !important; font-weight: 500 !important; line-height: 28px !important; margin: 5px 0 !important; color: #333333 !important; }
h2 { font-size: 19px !important; line-height: 20px !important; }
h3 { font-size: 16px !important; font-weight:	300 !important; line-height: 28px !important; color: #333333 !important; }
h4 { margin: 0 0 1.5em 0; font-weight: 700; }
h5 { font-size: 19px !important; ; font-weight:	400 !important; color: #333333 !important; margin-top: 16px !important; margin-bottom: 16px !important; }
h6 { font-size: 16px !important; font-weight:	600 !important; line-height: 25px !important; color: #333333 !important; }

p { text-align:center; color: #333333;}
p.image { margin-bottom: .8em;}
p.title { }
p.loc { text-align: left; margin-bottom: 10px; color: #737373; font-size: 16px;}
p.describe { text-align: left; }
p.ch-title { font-size: 18px; color: #404040; text-align: left; }
p.ch { font-size: 12px; color: #404040; text-align: left; }
p.footer { text-align:center; color: #333; font-size: 14px !important;}
a { 
	color: #333 !important ; 
	font-size: 19px !important; 
}

a:hover { color:#b3b3b3 !important; font-size: 19px !important; }
a:visited { color: #999999; }
a.cv-link:link {
	font-size: 16px !important;
	text-decoration: underline ;
}



a.loc { color: #737373 !important; text-decoration: underline; font-size: 17px !important}

a.h1 { font-size: 28px !important; line-height: 28px !important; margin: 5px 0 !important; color: #b51414 !important; }
a.newsinstagram { color: #fbad50 !important; font-size: 16px !important}
a.newsfb { color: #3b5998 !important; }
a.navs { color: #555555 !important; font-size: 20px !important;}
a.social { color: #b3b3b3 !important; }


/* Image
====================================================================*/

img { max-height:900px; 
}
img:hover { opacity: 1; }

p.img-work { margin-bottom: 2em; 

	
}

/* Work page content
====================================================================*/

#page-content{
	margin: 0 0;
}


/* Body
====================================================================*/

.container-fluid {
	padding-top: 96px;
}


/* Header 
====================================================================*/

header { height: 88px;  width : 1200px; background-color: #666666; background:  url(../images/header_1200.jpg) no-repeat center bottom; margin 0; position: fixed; }
header a.logo { position: absolute; display: block; width: 260px; height: 88px; background: url(../images/lulu-logo-header-2022.png) no-repeat 0 0; background-size: contain; z-index: 1; top: 30px; left: 20px; }
header a.logo span { display: none; }

/* Navigation 
====================================================================*/

nav { width: 1700px;
	position: static; 
	padding: 30px 0px 0px 0px; 
	text-decoration: none;
}

nav::after { content:''; display: block; clear: both; }

nav a.mobile_menu {
	width: 32px; height: 32px;
	background: url(../images/icon_menu.svg) no-repeat 0 0;
	background-size: contain; 
	position: absolute; top: 16px; right: 5%; margin-left: 0;
	display: none;
}


nav a:visited { color: #333 !important; }

nav ul { list-style: none; margin: 0px; padding: 0px; }
nav ul::after { content: ""; display: block; clear: both;}


nav ul li:hover { background-color: #fff; }
nav ul li:hover > ul { display: block; }

nav ul li a { display: inline-block; color: #333; padding: 10px 20px; text-decoration: none; width: 100px; position: relative; }
nav ul li a:hover { background-color: #ffffff; }

nav ul ul { display: none; position: static; top: 100%; background-color: #fff;}
nav ul ul li { position: relative; }
nav ul ul li a:hover { background-color: #f2f2f2; }
nav ul ul ul { left: 100%; top: 0; height: 350px; overflow-y:scroll; }

/* Nav Side 
====================================================================*/

#nav-side {
		margin: 2em 0 0 0;
		text-decoration: none;
		
}
#nav-side ul {
	list-style-type: none; margin: 0px; padding: 0px;
}

#nav-side ul ul li a { margin-left: 0px; }
#nav-side ul ul ul li a { margin-left: 10px; }

#nav-side ul a { color: #595959; }
#nav-side ul a:hover { color: #999999; }

/* Social 
====================================================================*/

#social-index {
	margin: 2em 0 1em 0;
}


#social {
	margin: 2em 0 0 0;
}

ul.social {
  list-style: none;
  display: flex;
  justify-content: center; /* centers icons horizontally */
  align-items: center;
  gap: 18px;                /* space between icons */
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

ul.social li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

/* Keep your existing color hover settings */
ul.social li.facebook a:hover  { color: rgb(59,89,152) !important; }
ul.social li.instagram a:hover { color: rgb(225,48,108) !important; }
ul.social li.linkedin a:hover  { color: rgb(0,123,182) !important; }
ul.social li.twitter a:hover   { color: rgb(0,172,237) !important; }
ul.social li.flickr a:hover    { color: rgb(255,0,132) !important; }
ul.social li.youtube a:hover   { color: rgb(187,0,0) !important; }

/* Work Sample columns
====================================================================*/

#sample {
	margin-bottom: 2em;
}


/* top level 
====================================================================*/

nav > ul { padding-left: 40%; }
nav > ul > li { float: left; }
nav > ul > li > a { padding: 10px 20px 15px 20px; width: auto; }

nav a[aria-haspopup="true"]::after {
	content:'';
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 4px solid #fff;
	right: 15px;
	top: 16px;
}
nav > ul > li > a[aria-haspopup="true"]::after {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid #fff;
	left: 20px;
	bottom: 6px;
	right: auto;
	top: auto;
}

}



/* Media Queries */

@media screen and (max-width: 1000px) { 
	h1 { font-size: 2.4em; }


}


@media screen and (max-width: 825px) { 

	h1 { font-size: 2.2em; }

	/* Header */
	header { height: 76px; background-image: url(../images/header_1200.jpg); }
	header a.logo { height:90px; top: 10px; left: 40px; }	

	nav { 
	padding: 28px 0px; 
	}
	
	#nav-side {
		display: none; height: 0px;
	}

	#social-index {
	margin: 0 0; width: 825px;
	}	

	#social {
	margin: 0 0; width: 825px;
	}
	
	.row-fluid .span9 {
    width: 100% !important;
    *width: 99.94680851063829% !important;
    padding-right: 4% !important; 
   }
	
}


@media screen and (max-width: 760px) {

	h1 { font-size: 1.8em; }
	h2 { font-size: 1.4em; }
	h3 { font-size: 1.1em; }
	a.btn { font-size: 1em; }
	
	/* Header */
	header a.logo { height: 70px; }
	
	#social-index {
	margin: 0 0; width: 100%;
	}
	
	#social {
	margin: 0 0; width: 100%;
	}
	
	
	
	
}

	
	.row-fluid .span9 {
    padding-right: 0 !important; 
	
}


@media screen and (max-width: 625px) {
	
	
	h1 { font-size: 1em;  }
	.title-mobile {margin-left: 10px; margin-right: 10px;}
	h3 { margin-bottom: 0; }
	a.btn { font-size: .9em; }
	
	.container-fluid {
	padding-top: 60px !important;
}

	header { height: auto; width: 100%; min-height: 58px; background-image: url(../images/header_1200.jpg); background-position: left top; }

	header a.logo {
		width: 125px; height: 52px;
		left: 10px; top: 10px;
	}

	p.loc { margin-left: 10px; margin-right: 10px;}
	p.describe { margin-left: 10px; margin-right: 10px;}



	nav {
		width: auto;
		padding: 50px 15px 20px 15px;
		height: 0px;
		overflow: hidden;
		
	}
	
	nav a.mobile_menu { display: block;}
	nav ul { display: block; position: static; background-color: #fff; height: 500px; }
	nav ul ul, nav ul ul ul { display: none; position: static; background-color: #fff; }
	nav > ul { padding: 0px; }
	nav > ul > li { float: none; margin-top: 25px; }
	nav ul li:hover { background: none; }
	
	
	nav ul li a {
		width: auto;
		display: block;
		margin: 8px 10px;
		padding: 6px 15px 6px 2px;
		border-bottom: 1px solid rgba(255,255,255,.25);
	}
	nav ul li a:hover { background-color: rgba(255,255,255,.2); }
	
	nav ul ul { background: #fff; /*display: none; */ height: 200px; overflow-y: scroll;}	
	nav ul ul li a { margin-left: 30px; }
	nav ul ul ul li a { margin-left: 60px; }
	nav a[aria-haspopup="true"]::after { display: none; }
	
	nav ul ul ul { background: #fff; /*display: none;*/ }	
	
	#nav-side {
		display: none; height: 0px;
	}
	
}



@media screen and (max-width: 425px) {


		
	header a.logo { height:25px; 
		top: 10px;
	}
	
	p.image { margin-bottom: .5em;}

	
	/* Nav */
	nav { padding-top: 40px}
	
	
	/* Social*/
	ul.social{
	text-align: center;
	display: block;
	margin: 0 0 0 2%;
	list-style-type: none;
	}
	
	ul.social li{
	font-size: 1em;
	display: inline;
	padding: 1% 1%;
	
	}

	nav ul li a {
		width: auto;
		display: block;
		margin: 8px 10px;
		padding: 6px 15px 6px 2px;
		border-bottom: 1px solid rgba(255,255,255,.25);
	}



}



/* Sticky footer layout
   Ensures footer stays at the bottom even if content is short
==============================================================*/

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#page {
  flex: 1; /* pushes footer to bottom */
}

/* Optional footer styling — adjust to your site’s theme */
footer {
  text-align: center;
  padding: 15px 0;
  background-color: #fff;
  color: #333;
  border-top: 0px solid ##fff;
}

/* Sticky layout (already suggested earlier) */
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; min-height: 100vh; }
#page { display: flex; flex-direction: column; flex: 1; }

/* Make the social block sit at the bottom of #page (above footer) */
.social-wrap { margin-top: auto; }

/* Center the icons horizontally; override any older ul.social rules */
#page .social-wrap ul.social {
  margin: 16px 0 !important;
  padding: 0 !important;
  list-style: none !important;

  display: flex !important;
  justify-content: center !important;
  gap: 16px;           /* adjust spacing as you like */
}

/* Tidy list items/links; remove any padding that pushes things off-center */
#page .social-wrap ul.social li { 
  display: inline-block !important; 
  padding: 0 !important; 
  margin: 0 !important; 
}

/* Optional: subtle look consistent with your site */
#page .social-wrap { 
  background: transparent;   /* ensure no dividing line */
  border-top: none !important;
  text-align: center;
}

/* If your older CSS set ul.social to be offset, this guarantees center */

	


/* === Mobile nav toggle override (must be last) === */
@media screen and (max-width: 625px) {
  /* Start closed */
  header nav {
    height: 0 !important;            /* overrides older 'height: 0px' rule */
    overflow: hidden !important;
    transition: height .25s ease;     /* simple open/close animation */
  }

  /* When open */
  header nav.open {
    height: auto !important;          /* <-- the key fix */
    overflow: visible !important;
  }

  /* Make sure the list actually shows and isn’t offset */
  header nav > ul {
    display: block !important;
    padding-left: 0 !important;
    margin: 0 !important;
  }

  /* Ensure the hamburger is visible/clickable */
  header a.mobile_menu {
    display: block !important;
    position: absolute;
    top: 16px;
    right: 5%;
    z-index: 1000;                    /* above header image */
  }
}




/* Back-to-top button */
.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: none;              /* hidden until scrolled */
  z-index: 2000;              /* above page content */
  border-radius: 10px;        /* matches your rounded look */
}

.back-to-top img {
  width: 100%;
  height: 100%;
  display: block;
}

.back-to-top.show { display: block; }

@media (hover: hover) {
  .back-to-top:hover { transform: translateY(-2px); }
}

/* Tweak size/position on small screens */
@media (max-width: 625px) {
  .back-to-top {
    right: 12px;
    bottom: 16px;
    width: 40px;
    height: 40px;
  }
}

/* Collapsible “Full text” */
details.collapsible {
  margin: 12px 0 8px;
}

details.collapsible > summary {
  cursor: pointer;
  outline: none;
  list-style: none;
  font-weight: 600;
  text-decoration: underline;      /* underline to indicate clickability */
  text-underline-offset: 3px;      /* gives it a bit of visual breathing room */
  color: #333;                     /* adjust to match your theme */
}

details.collapsible > summary:hover {
  color: #000;                     /* optional: darken on hover */
}

details.collapsible > summary::-webkit-details-marker {
  display: none;                   /* hides the default triangle icon */
}

details.collapsible .collapsible-body {
  margin-top: 10px;
}


/* --- Language switch link --- */
.lang-switch {
  position: absolute;
  top: 110px;              /* adjust vertically to align with your title */
  right: 60px;             /* roughly matches nav alignment with NEWS */
  font-size: 0.95em;
  text-decoration: none;
  border-bottom: 1px solid #555;
  color: #333;
  transition: color 0.2s, border-color 0.2s;
  z-index: 500;            /* make sure it sits above background elements */
}

.lang-switch:hover {
  color: #000;
  border-color: #000;
}

/* Adjust for smaller screens */
@media screen and (max-width: 760px) {
  .lang-switch {
    top: 130px;            /* slightly closer on mobile */
    right: 20px;
    font-size: 0.9em;
  }
}