/*
Theme Name: I Love Curling
Description: Lightweight landing page + blog, seamless handoff to Threadless.
Version: 1.2.0
Text Domain: ilovecurling
*/

/* ========== Design Tokens (easy to tweak) ========== */
:root{
  /* Neutral light UI similar to Threadless storefront */
  --ilc-bg: #ffffff;
  --ilc-surface: #ffffff;
  --ilc-text: #111827;          /* near-black */
  --ilc-muted: #6b7280;         /* gray-500 */
  --ilc-border: #e5e7eb;        /* gray-200 */
  --ilc-link: #2563eb;          /* blue-600 */

  /* Brand pop (stone red) */
  --ilc-accent: #d1242f;

  /* Layout */
  --ilc-radius: 14px;
  --ilc-maxw: 1120px;

  /* Typography */
  --ilc-font: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --ilc-leading: 1.6;
}

/* ========== Base / Resets ========== */
*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0;
  background: var(--ilc-bg);
  color: var(--ilc-text);
  font-family: var(--ilc-font);
  line-height: var(--ilc-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--ilc-link); text-decoration: none; }
a:hover{ text-decoration: underline; }
button{ font: inherit; }

/* Keyboard focus (accessibility) */
:where(a,button,input,textarea,select):focus-visible{
  outline: 3px solid rgba(37,99,235,.6);
  outline-offset: 2px;
}

/* Container */
.container{ max-width: var(--ilc-maxw); margin: 0 auto; padding: 0 20px; }

/* Utility: Visually hidden (screen-reader only) */
.visually-hidden{
  position:absolute!important;
  clip: rect(1px,1px,1px,1px);
  padding:0!important; border:0!important;
  height:1px!important; width:1px!important;
  overflow:hidden; white-space:nowrap;
}

/* ========== Buttons ========== */
.btn{
  display:inline-block;
  padding:10px 16px;
  border-radius: 999px;
  background: var(--ilc-accent);
  color: #fff;
  font-weight: 700;
  border: 0;
  transition: opacity .15s ease;
}
.btn:hover{ opacity: .92; text-decoration: none; }

/* ========== Header ========== */
.ilc-header{
  position: sticky; top: 0; z-index: 10;
  background: var(--ilc-surface);
  border-bottom: 1px solid var(--ilc-border);
}
.ilc-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{ display:flex; gap:10px; align-items:center; }
.brand-title{ font-weight:800; letter-spacing:.2px; }

/* Header logo image (header.png or custom logo) */
.header-logo, .custom-logo{
  max-height: 200px;       /* adjust to taste */
  height: auto; width: auto;
}
.header-banner {
  text-align: center;
  background: #fff; /* or match your site bg */
}


/* Header actions (Instagram + Shop) */
.header-actions{ display:flex; gap:12px; align-items:center; }

/* OPTIONAL: Center the logo in the header bar
   -------------------------------------------------
   Uncomment the two rules below to center the brand
   and remove space-between. You can also hide the
   .header-actions if you don’t want items on the right.
*/

.ilc-header-inner{ justify-content: center; }
.brand{ margin: 0 auto; }


/* ========== Hero ========== */
.hero{
  padding: 56px 0;
  background:
    radial-gradient(900px 380px at 90% -10%, rgba(37,99,235,.06), transparent 60%),
    radial-gradient(700px 320px at -10% -10%, rgba(209,36,47,.05), transparent 60%);
	display: none;
}
.hero-inner{
  display:grid; gap:20px; grid-template-columns: 1fr;
}
.hero h1{ font-size: 44px; margin: 0 0 6px; line-height: 1.1; }
.hero p{ font-size: 18px; color: var(--ilc-muted); margin: 4px 0 16px; }

/* ========== Sections & Headings ========== */
section h2{ font-size: 22px; margin: 18px 0 8px; }

/* ========== Product Grid (Designs) ========== */
.grid{ display:grid; gap:20px; margin: 12px 0 8px; }
@media (min-width:680px){ .grid{ grid-template-columns: repeat(3,1fr); } }
@media (min-width:1024px){ .grid{ grid-template-columns: repeat(4,1fr); } }

.card{
  background: var(--ilc-surface);
  border: 1px solid var(--ilc-border);
  border-radius: var(--ilc-radius);
  overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover{ box-shadow: 0 6px 20px rgba(0,0,0,.06); transform: translateY(-2px); }

.card-media{
  aspect-ratio: 4/3;
  background: #f8fafc;
  object-fit: cover;
  width: 100%;
}
.card-body{ padding: 12px 14px; }
.card-title{ font-weight: 700; }

/* ========== Blog ========== */
.post-list{ display:grid; gap:24px; margin: 28px 0; }
.post{
  padding: 18px;
  border-radius: var(--ilc-radius);
  background: var(--ilc-surface);
  border: 1px solid var(--ilc-border);
}
.post h2{ margin: 0 0 6px; }
.meta{ color: var(--ilc-muted); font-size: 14px; }

/* ========== About / Culture Section (under grid) ========== */
.ilc-about{
  margin: 28px 0 8px;
  border-top: 1px solid var(--ilc-border);
  padding-top: 22px;
}
.ilc-about .about-inner{ max-width: 800px; }
.ilc-about p{ margin: 0 0 14px; color: var(--ilc-text); }
.ilc-about p strong{ font-weight: 800; }
.ilc-about .about-cta .btn{ margin-top: 2px; }

/* ========== Footer ========== */
footer{
  margin-top: 48px;
  border-top: 1px solid var(--ilc-border);
  padding: 28px 0;
  background: var(--ilc-surface);
}
.footer-inner{
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:center; justify-content:space-between;
}
.footer-menu{ display:flex; gap:18px; flex-wrap:wrap; }
.small{ font-size: 13px; color: var(--ilc-muted); }

/* ========== Optional Full-Width Header Banner ========== */
/* If you move the header image above the nav as a masthead */
.header-banner{ text-align:center; background:#fff; }
.header-banner-img{ max-width:100%; height:auto; display:inline-block; }

/* ========== Minor Tweaks (spacing at breakpoints) ========== */
@media (min-width:768px){
  .hero{ padding: 72px 0; }
  .hero h1{ font-size: 52px; }
}