/* ============================= Figert personal site - style.css Replace the file in your hosting File Manager. ============================= */

/* --- Base reset --- */

{ box-sizing: border-box; } html,body { margin:0; padding:0; height:100%; font-family: "Open Sans", Arial, sans-serif; color:#243044; background:#f7f9fb; }

/* --- Colors --- */ 
:root { --navy: #0c2e4e; --slate: #2b4e75; --accent: #dcbf5a; / accent color */ --muted-bg: #eef2f6; --text: #333; }

/* --- HERO --- */ 
.hero { background: linear-gradient(135deg,var(--navy),var(--slate)); color:#fff; padding:48px 20px; } 
.hero-inner { max-width:1100px; margin:0 auto; text-align:center; display:block; gap:28px; align-items:center; }

/* Headshot: responsive, circular, with frame & shadow / / object-position used to show the top of the head in the crop 
/ .hero-photo { width:100px; / mobile size / height:100px; object-fit:cover; object-position:center 30%; / nudges image upward (mobile) */ 

border-radius:50%; border:3px solid rgba(255,255,255,0.22); box-shadow:0 6px 18px rgba(0,0,0,0.25); display:block; margin:0 auto 16px; }

/* Hero text */ 

.hero-text h1 { font-size:2em; margin:0 0 6px; color:#fff; font-weight:700; } .hero-text h2 
{ font-size:1.05em; margin:0 0 10px; color:rgba(255,255,255,0.92); font-weight:400; } 
.hero-text .tagline { margin:0 0 14px; font-style:italic; color:rgba(255,255,255,0.9); }

/* Buttons */ 

.cta { margin-top:6px; } .button { display:inline-block; background: rgba(255,255,255,0.12); color:#fff; padding:10px 16px; 
border-radius:6px; text-decoration:none; margin-right:10px; transition: background .18s, color .18s; } .button:hover { background: var(--accent); color: var(--navy); } 
.button.secondary { background: transparent; border:2px solid rgba(255,255,255,0.2); }

/* --- Desktop layout (photo left of text) --- */ 

@media (min-width:900px) { .hero-inner { display:flex; align-items:center; text-align:left; } 
.hero-photo { width:140px; height:140px; object-position:center 15%; / nudges image upward (desktop) */ margin:0; flex:0 0 140px; } .hero-text { flex:1 1 auto; } }

/* --- Sections --- */ 

.section { padding:44px 20px; max-width:900px; margin:0 auto; background:transparent; } .section.alt { background: var(--muted-bg); } 
h2 { color:var(--navy); font-size:1.6em; margin-top:0; } p { color:var(--text); line-height:1.6; }

/* Download button */ 

.section .button { background: var(--navy); color:#fff; margin-top:12px; } .section .button:hover { background:var(--accent); color:var(--navy); }

/* Contact links */ 

#contact p a { color:var(--navy); text-decoration:underline; }

/* Footer */ 

.footer { background:var(--navy); color:#fff; text-align:center; padding:14px 10px; font-size:0.9em; }

/* Small responsive tweak */ 

@media (min-width:1200px) { .hero { padding:72px 20px; } }

/* Fix wrapping, hyphens, and left alignment - final version */
.section {
  text-align: left;
  padding: 60px 20px;
  hyphens: none;              /* kills automatic hyphenation */
  word-break: keep-all;       /* prevents mid-word breaks */
  overflow-wrap: normal;      /* no forced wrapping */
}

.section > div {
  max-width: 820px;
  margin: 0 auto;
  text-align: left;
  hyphens: none;
  word-break: keep-all;
}

.section p,
.section div > div,
.section strong {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  hyphens: none !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  padding-left: 0 !important; /* extra kill for any sneaky left padding */
}

/* Mobile-specific: wider container to reduce wrapping */
@media (max-width: 900px) {
  .section > div {
    max-width: 100%;          /* full width on small screens for fewer breaks */
    padding: 0 10px;
  }
}
/* Force perfect left alignment for About and Experience sections */
#about, #experience {
  text-align: left !important;
  padding: 60px 20px !important;
}

#about p, 
#experience p,
#about div,
#experience div,
#experience strong {
  text-align: left !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;      /* Kills any paragraph indents */
  word-break: keep-all !important;
  hyphens: none !important;
}

#experience .alt {                /* Targets the alt class specifically */
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Mobile: Ensure no extra indent on small screens */
@media (max-width: 900px) {
  #about, #experience {
    padding: 40px 15px !important;
  }
  
  #about p, #experience p {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}
/* Hero headshot — circular, framed, perfectly cropped */
.hero-photo {
  width: 180px;           /* desktop size */
  height: 180px;
  border-radius: 50%;     /* perfect circle */
  object-fit: cover;      /* crops cleanly */
  object-position: center 20%; /* pushes the crop up a little so the top of your head isn’t cut off */
  border: 6px solid #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
}

.hero-photo:hover {
  transform: scale(1.05);
}
/* Mobile adjustment — slightly smaller but still perfect */
@media (max-width: 900px) {
  .hero-photo {
    width: 140px;
    height: 140px;
    object-position: center 15%;  /* fine-tune for phone if needed */
  }
}
footer p, footer {
  color: #e0e0e0 !important;   /* light gray — very clean */
}