/* basic.css
   Minimal, self-contained styles to render home.html (static landing page)
   without importing creation-style.css or the full WordPress child theme.
*/

/* ---------- Base / reset (minimal) ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

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

ul { margin: 0; padding: 0; list-style: none; }

h1, h2 { margin: 0 0 12px; font-weight: bold; }
p { margin: 0 0 18px; }

/* ---------- Global theme feel ---------- */
:root{
  --bw-blue: #0000CC;
  --bw-red:  #A1071B;
  --text:    #666666;
  --text-dark:#333333;
  --paper:   #ffffff;
  --bg:      #000000;
}

body{
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Verdana, Tahoma, sans-serif;
  font-size: 12px;
  line-height: 20px;
}

a{ color: var(--bw-blue); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ---------- Layout wrappers (mirrors Creation theme proportions) ---------- */
#container-wrap,
#container-bottom-wrap{ width: 100%; }

#wrapper-top,
#wrapper-bottom{
  max-width: 1040px;
  margin: 0 auto;
}

#container,
#container-footer{
  background: var(--paper);
  width: 100%;
  padding: 0 50px 0px;
}

/* ---------- Header / top band ---------- */
#top{
  position: relative;
  border-top: 8px solid var(--bw-blue);
  border-bottom: 1px solid #f4f4f4;
  padding: 0;
  min-height: 140px;
}

#top-left{ /* home.html uses only top-left */
  width: 100%;
}

#logo{
  width: 152px;
  float: left;
}

#logo a{ display: inline-block; }

.desc{
  width: 158px;
  margin: 70px 0 0 10px;
  float: left;
  clear: none;
  text-transform: lowercase;
  font-size: 20px;
  font-weight: normal;
  color: var(--bw-red);
  line-height: 24px;
}

/* clear floats after logo/desc so main content starts below */
#top::after{
  content:"";
  display:block;
  clear:both;
}

/* ---------- Main landing content ---------- */
#main{
  padding: 28px 0 40px; /* matches landing-main intent */
  width: 100%;
  clear: both;
}

.landing-main h1,
.landing-main h2,
.landing-main h3{
  color: var(--bw-red);
}

.landing-main h1{ font-size: 28px; line-height: 30px; }
.landing-main h2{ font-size: 24px; line-height: 26px; }

/* ---------- Single-column landing image ---------- */
.landing-one-col{
  display: flex;
  justify-content: center;
  padding: clamp(20px, 4vw, 48px) 0;
}

.landing-one-col img{
  max-width: 100%;
  height: auto;
  display: block;

  /* visual treatment */
  border-radius: 14px;
  overflow: hidden;
}

.landing-two-col{
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.landing-col{
  flex: 1 1 0;
  min-width: 0;
}

.signature{
  text-align: right;	
  margin-top: 40px;
  color: var(--text-dark);
}

/* ---------- Footer ---------- */
#footer{ 
	padding: 0;
background-color:#fafafa;
border:solid 1px #e9e9e9;
border-width:1px;
font-size:11px;
color:#999999;
 }

#footer-content{
  overflow: hidden;
  padding: 20px 0;
  border-bottom: 8px solid var(--bw-blue);
}

#footer ul{margin:0px; padding:0px; list-style-type:none; float:right}
#footer ul li{margin:0px; padding:0px; list-style-type:none; float:left;  text-align:right}
#footer ul li.footer-text{font-size:14px; color:#999999; text-align:right}
#footer ul li.footer-logo{border-left:solid 1px #e9e9e9; padding:0px 10px 0px 20px;}

#footer a{ text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  #container, #container-footer{
    padding: 0 20px 0px;
  }
  #wrapper-top, #wrapper-bottom{
    padding: 0 16px;
  }
}

@media (max-width: 720px){
  .landing-two-col{ flex-direction: column; }
  #top{ min-height: 0; padding-bottom: 18px; }
  #logo, .desc{ float: none; }
  .desc{ margin: 12px 0 0; width: auto; }
  
}

@media (max-width: 720px){
  /* ensure nothing wraps around footer text */
  #footer,
  #footer *{
    float: none !important;
  }

  .footer-text{
    clear: both;
    text-align: center !important;
    display: block;
    width: 100%;
    margin-top: 16px;
  }
}

/* ---------- Footer text spacing (desktop) ---------- */
@media (min-width: 721px){
  #footer ul li.footer-text{
    padding-top: 10px;
	padding-right:20px; 
  }
}

/* ---------- Footer logo centering (mobile) ---------- */
@media (max-width: 720px){
  #footer ul li.footer-logo{
    display: block;
    text-align: center;
    margin: 0 auto;
  }

  #footer ul li.footer-logo img{
    margin: 0 auto;
  }
}