/*
Theme Name: Aidan Burley
Theme URI: https://aidanburley.com
Author: Adam Lynch
Author URI: https://lynchiethirty.com
Description: A simple, responsive one-page personal profile theme with a two-column hero, about section, highlights, and a contact section built for the WPForms plugin. Fully customisable photo and text via the Customizer.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: aidan-burley
*/

/* ==========================================================================
   Fonts are loaded via functions.php (Google Fonts: Fraunces + Plus Jakarta Sans)
   ========================================================================== */

:root{
  --ink:#241f1c;
  --muted:#6b6059;
  --paper:#faf6f2;
  --accent:#b9704f;
  --accent-dark:#8a4f36;
  --line:#e8ddd2;
  --contact-bg:#241f1c;
  --contact-fg:#f6efe8;
  --contact-muted:#c9beb4;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Plus Jakarta Sans', sans-serif;
  color:var(--ink);
  background:var(--paper);
}
img{ max-width:100%; height:auto; }
a{ color:inherit; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

/* ---------------- Header / desktop nav ---------------- */
.site-header{
  padding:26px 0;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:60;
  background:var(--paper);
}
.site-header .wrap{ display:flex; justify-content:space-between; align-items:center; }
.brand{ font-family:'Fraunces',serif; font-weight:800; font-size:19px; letter-spacing:-.01em; }
.brand a{ text-decoration:none; color:var(--ink); }

.primary-nav ul{ list-style:none; display:flex; margin:0; padding:0; }
.primary-nav li{ margin-left:30px; }
.primary-nav a{ color:var(--muted); text-decoration:none; font-size:15px; font-weight:500; }
.primary-nav a:hover{ color:var(--accent-dark); }

/* ---------------- Hero (2 column) ---------------- */
.hero{ padding:0; }
.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  min-height:640px;
}
.hero-photo{ position:relative; overflow:hidden; background:#e8ddd2; }
.hero-photo img{ width:100%; height:100%; display:block; object-fit:cover; }
.hero-text{ display:flex; flex-direction:column; justify-content:center; padding:64px 72px; }
.hero-text .kicker{
  text-transform:uppercase; letter-spacing:.16em; font-size:13px;
  color:var(--accent-dark); font-weight:700; margin-bottom:16px;
}
.hero-text h1{
  font-family:'Fraunces',serif; font-weight:800; font-size:58px;
  line-height:1.05; letter-spacing:-.02em; margin:0 0 20px;
}
.hero-text p{ font-size:17px; line-height:1.7; color:var(--muted); max-width:480px; margin:0; }

/* ---------------- Social icon buttons (hero + footer) ---------------- */
.social-icons{ display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; }
.social-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:#fff; border:1px solid var(--line);
  color:var(--ink); text-decoration:none;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.social-icon svg{ width:18px; height:18px; }
.social-icon:hover{
  background:var(--accent); border-color:var(--accent); color:#fff;
  transform:translateY(-2px);
}
.hero-text .social-icons{ justify-content:flex-start; }

.site-footer .social-icons{ margin:0; }
.site-footer .social-icon{ width:34px; height:34px; }
.site-footer .social-icon svg{ width:16px; height:16px; }

/* ---------------- Generic sections ---------------- */
.site-section{ padding:64px 0; border-top:1px solid var(--line); }
.section-title{
  font-family:'Fraunces',serif; font-weight:800; font-size:28px;
  letter-spacing:-.01em; margin:0 0 28px;
}
.about p{ font-size:16px; line-height:1.8; color:var(--muted); max-width:760px; margin:0 0 16px; }

.cards{ display:flex; gap:28px; flex-wrap:wrap; }
.card{ flex:1 1 280px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:28px; }
.card{ display:flex; flex-direction:column; }
.card h3{ font-family:'Fraunces',serif; font-weight:700; font-size:18px; margin:0 0 10px; }
.card p{ color:var(--muted); font-size:15px; line-height:1.6; margin:0; flex-grow:1; }
.card-button{
  display:inline-block; align-self:flex-start; margin-top:20px;
  background:var(--accent); color:#fff !important; text-decoration:none;
  font-family:'Plus Jakarta Sans', sans-serif; font-weight:600; font-size:14px;
  padding:10px 22px; border-radius:24px; transition:background .2s ease;
}
.card-button:hover{ background:var(--accent-dark); }

/* ---------------- Contact ---------------- */
.contact{ background:var(--contact-bg); border-top:none; padding:96px 0; }
.contact .section-title{ color:var(--contact-fg); font-size:34px; }
.contact .wrap{ display:flex; gap:56px; flex-wrap:wrap; align-items:flex-start; }
.contact-info{ flex:1 1 300px; }
.contact-info p{ color:var(--contact-muted); line-height:1.7; margin:0 0 26px; max-width:420px; font-size:16px; }
.social a{
  display:inline-block; margin:0 14px 10px 0; color:var(--contact-fg);
  text-decoration:none; font-size:14px; font-weight:500;
  border:1px solid rgba(246,239,232,.25); padding:9px 18px; border-radius:24px;
}
.social a:hover{ border-color:var(--accent); }

.contact-form-wrap{
  flex:1 1 360px; background:rgba(246,239,232,.04); padding:28px;
  border-radius:12px; border:1px solid rgba(246,239,232,.12);
}

/* ----------------------------------------------------------------------
   WPForms styling: force the theme's fonts and colours on every part of
   the form, with high enough specificity/!important to survive WPForms'
   own stylesheet (and any plugin/theme updates) overriding it.
   ------------------------------------------------------------------- */
.contact-form-wrap .wpforms-container,
.contact-form-wrap .wpforms-container-full,
.contact-form-wrap .wpforms-form,
.contact-form-wrap .wpforms-field,
.contact-form-wrap .wpforms-field label,
.contact-form-wrap .wpforms-field-label,
.contact-form-wrap .wpforms-field-sublabel,
.contact-form-wrap .wpforms-field input,
.contact-form-wrap .wpforms-field textarea,
.contact-form-wrap .wpforms-field select,
.contact-form-wrap .wpforms-submit-container,
.contact-form-wrap .wpforms-submit{
  font-family:'Plus Jakarta Sans', sans-serif !important;
}

.contact-form-wrap .wpforms-field-label,
.contact-form-wrap .wpforms-field label{
  color:var(--contact-fg) !important;
  font-weight:700 !important;
}
.contact-form-wrap .wpforms-field-sublabel{
  color:var(--contact-muted) !important;
  font-weight:400 !important;
}
.contact-form-wrap .wpforms-field-required label .wpforms-required-label{
  color:var(--accent) !important;
}

.contact-form-wrap .wpforms-container input[type=text],
.contact-form-wrap .wpforms-container input[type=email],
.contact-form-wrap .wpforms-container input[type=tel],
.contact-form-wrap .wpforms-container input[type=number],
.contact-form-wrap .wpforms-container input[type=url],
.contact-form-wrap .wpforms-container select,
.contact-form-wrap .wpforms-container textarea{
  background:rgba(246,239,232,.06) !important;
  border:1px solid rgba(246,239,232,.2) !important;
  color:var(--contact-fg) !important;
  border-radius:6px !important;
  font-size:16px !important;
}
.contact-form-wrap .wpforms-container ::placeholder{
  color:var(--contact-muted) !important;
  opacity:1 !important;
}

.contact-form-wrap .wpforms-container .wpforms-submit{
  background:var(--accent) !important;
  color:#fff !important;
  border:none !important;
  border-radius:6px !important;
  font-weight:600 !important;
}
.contact-form-wrap .wpforms-container .wpforms-submit:hover{
  background:var(--accent-dark) !important;
}

.contact-form-wrap .wpforms-placeholder{
  color:var(--contact-muted); font-size:14px; line-height:1.6;
  font-family:'Plus Jakarta Sans', sans-serif;
  border:1px dashed rgba(246,239,232,.3); border-radius:8px; padding:18px;
}

/* ---------------- Footer ---------------- */
.site-footer{ padding:32px 0; border-top:1px solid var(--line); }
.site-footer .wrap{ display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:13px; flex-wrap:wrap; gap:8px; }

/* ---------------- Mobile burger nav ---------------- */
.burger{
  display:none; width:40px; height:40px; border:none; background:none; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px; padding:0;
}
.burger span{ display:block; width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-overlay{
  position:fixed; inset:0; background:rgba(36,31,28,.45);
  opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:70;
}
.nav-overlay.is-open{ opacity:1; pointer-events:auto; }

.mobile-nav{
  position:fixed; top:0; right:0; height:100%; width:78%; max-width:320px;
  background:var(--paper); border-left:1px solid var(--line);
  box-shadow:-20px 0 40px -20px rgba(36,31,28,.35);
  transform:translateX(100%); transition:transform .3s ease; z-index:80;
  padding:28px 32px; display:flex; flex-direction:column;
}
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav-close{ align-self:flex-end; background:none; border:none; font-size:26px; line-height:1; color:var(--ink); cursor:pointer; padding:6px; margin-bottom:24px; }
.mobile-nav ul{ list-style:none; margin:0; padding:0; }
.mobile-nav a{
  display:block; font-family:'Fraunces',serif; font-size:22px; font-weight:600;
  color:var(--ink); text-decoration:none; padding:14px 0; border-bottom:1px solid var(--line);
}

@media (max-width:900px){
  .hero-text h1{ font-size:46px; }
  .hero-text{ padding:48px 40px; }
}
@media (max-width:760px){
  .hero-grid{ grid-template-columns:1fr; min-height:auto; }
  .hero-photo{ height:380px; }
  .hero-text{ text-align:center; padding:48px 32px; }
  .hero-text p{ margin:0 auto; }
  .primary-nav{ display:none; }
  .burger{ display:flex; }
}
@media (min-width:761px){
  .burger, .nav-overlay, .mobile-nav{ display:none; }
}