/* Hollow Creek Golf Club - site stylesheet */
:root {
  --pine: #1f3a2e;
  --fairway: #3f7a3b;
  --sand: #e8dcb4;
  --mist: #eef4ef;
  --flag: #c8402f;
  --ink: #1b2420;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Verdana, Geneva, sans-serif; line-height: 1.6; color: var(--ink); background: #ffffff; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; color: var(--pine); line-height: 1.2; }
h1 { font-size: 2.4rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.7rem; margin-top: 0; }
a { color: var(--fairway); }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: 1050px; margin: 0 auto; padding: 0 1.25rem; }

/* Header and navigation */
header { background: var(--pine); color: #fff; }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; max-width: 1050px; margin: 0 auto; }
.logo { font-family: Georgia, serif; font-size: 1.6rem; color: #fff; text-decoration: none; }
.logo span { color: var(--sand); }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
nav a { display: block; padding: 0.6rem 1rem; color: #fff; text-decoration: none; border-bottom: 3px solid transparent; transition: background-color 0.3s, border-color 0.3s; }
nav a:hover, nav a:focus { background: var(--fairway); border-bottom-color: var(--sand); }
nav a.current { border-bottom-color: var(--flag); }

/* Hero */
.hero { background: var(--mist); }
.hero .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; padding-top: 2.5rem; padding-bottom: 2.5rem; }
.hero .text { flex: 1 1 100%; }
.hero .art { flex: 1 1 100%; }
.hero img { border-radius: 6px; border: 6px solid #fff; }
.button { display: inline-block; background: var(--flag); color: #fff; padding: 0.7rem 1.4rem; text-decoration: none; border-radius: 4px; font-weight: bold; border: 0; font-size: 1rem; cursor: pointer; transition: background-color 0.3s; }
.button:hover, .button:focus { background: #9f2f21; }

/* Content sections */
main section { padding: 2.5rem 0; }
.columns { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.columns > div { flex: 1 1 280px; }
.panel { background: var(--mist); border-left: 5px solid var(--fairway); padding: 1.25rem; border-radius: 0 6px 6px 0; }
.panel.sand { background: #f8f3e2; border-left-color: var(--sand); }

/* Tables */
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 520px; }
caption { text-align: left; font-family: Georgia, serif; font-size: 1.2rem; padding-bottom: 0.5rem; color: var(--pine); }
th, td { padding: 0.65rem 0.8rem; text-align: left; border-bottom: 1px solid #cfd8d1; }
thead th { background: var(--pine); color: #fff; }
tbody tr:nth-child(even) { background: var(--mist); }
tbody tr:hover { background: #dcebdc; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.gallery figure { margin: 0; background: #fff; border: 1px solid #cfd8d1; overflow: hidden; border-radius: 6px; }
.gallery img { width: 100%; height: 240px; object-fit: cover; transition: transform 0.4s; }
.gallery figure:hover img { transform: scale(1.06); }
.gallery figcaption { padding: 0.6rem 0.8rem; font-size: 0.9rem; }

/* Forms */
form { background: var(--mist); padding: 1.5rem; border-radius: 6px; }
fieldset { border: 1px solid #b9c7bc; margin: 0 0 1.25rem; padding: 1rem; border-radius: 4px; }
legend { font-family: Georgia, serif; color: var(--pine); font-weight: bold; padding: 0 0.4rem; }
label { display: block; margin: 0.6rem 0 0.2rem; font-weight: bold; }
label.inline { display: inline-block; font-weight: normal; margin-right: 1rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea { width: 100%; padding: 0.6rem; border: 1px solid #8fa395; border-radius: 4px; font-family: inherit; font-size: 1rem; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--sand); border-color: var(--fairway); }

/* Footer */
footer { background: var(--pine); color: #dfe8e1; padding: 1.5rem 0; margin-top: 2rem; font-size: 0.9rem; }
footer a { color: var(--sand); }

@media (max-width: 640px) {
  h1 { font-size: 1.8rem; }
  .header-inner { flex-direction: column; align-items: flex-start; }
  nav ul { width: 100%; }
  nav li { flex: 1 1 50%; }
  nav a { text-align: center; }
}