/* Import modern fonts (Poppins for brand, Inter for body) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Poppins:wght@600;700;800&display=swap');

:root{
    --max-width: 1100px;
    --gap: 1rem;
    --brand: #0a74da;
    --bg: #ffffff;
    --muted: #666;
    --radius: 8px;

    /* new font variables */
    --brand-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    --body-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: var(--body-font);
    color:#111;
    background:var(--bg);
    line-height:1.45;
    -webkit-font-smoothing:antialiased;
}

.container{
    width:100%;
    max-width:var(--max-width);
    margin:0 auto;
    padding:0 1rem;
}

/* Header */
.site-header{
    border-bottom:1px solid #eee;
    background:#fff;
    position:sticky;
    top:0;
    z-index:40;
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--gap);
    padding:0.75rem 0;
}

/* Logo / Brand typography */
.logo{
    /* ensure logo groups image + text inline */
    display:flex;
    align-items:center;
    gap:0.75rem;
    font-family: var(--brand-font);
    line-height:1;
    font-size:1.375rem;
    margin:0;
    letter-spacing: -0.02em;
    vertical-align:middle;
}

/* square SVG logo used site-wide */
.brand-logo{
    width:56px;
    height:56px;
    display:block;
    flex:0 0 56px;
    border-radius:10px;
    box-shadow: 0 4px 14px rgba(10,116,218,0.08);
}

/* scale up on larger screens */
@media (min-width: 1100px){
    .brand-logo{
        width:72px;
        height:72px;
        flex:0 0 72px;
    }
    .logo{font-size:1.75rem}
}

/* Emphasise 'Jack's' with a modern bold treatment (removed gradient) */
.logo .logo-strong{
    color: var(--brand);
    font-weight: 800;
    /* subtle lift without a gradient */
    text-shadow: 0 1px 0 rgba(0,0,0,0.03);
}

/* Keep 'Bread' simpler so the brand remains readable */
.logo .logo-light{
    font-weight: 600;
    color: #111;
    margin-left: 0.25rem;
}

/* Nav & toggle (mobile-first) */
.nav-toggle{
    background:transparent;
    border:0;
    font-size:1.25rem;
    cursor:pointer;
    padding:0.25rem 0.5rem;
}
.nav-toggle:focus{outline:2px solid var(--brand); border-radius:4px}

/* hide nav by default on small screens */
.primary-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    border-bottom:1px solid #eee;
    transform-origin:top;
    transform:scaleY(0);
    transition:transform .18s ease, opacity .12s ease;
    opacity:0;
    z-index:30;
}
.primary-nav.open{
    transform:scaleY(1);
    opacity:1;
}

/* nav list styling */
.nav-list{
    list-style:none;
    margin:0;
    padding:0.5rem 1rem;
    display:flex;
    flex-direction:column;
    gap:0.25rem;
}
.nav-list a{
    display:block;
    padding:0.5rem 0;
    text-decoration:none;
    color:#111;
    border-radius:4px;
}
.nav-list a:focus, .nav-list a:hover{
    background:rgba(10,116,218,0.08);
}

/* Main content */
main{padding:1.25rem 0}
.intro{margin-bottom:1rem}
.grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1rem;
}
.card{
    padding:1rem;
    border:1px solid #eee;
    border-radius:var(--radius);
    background:#fff;
}

/* Footer */
.site-footer{
    border-top:1px solid #eee;
    padding:1rem 0;
    margin-top:2rem;
    background:#fafafa;
}

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

/* Larger screens */
@media (min-width: 768px){
    .nav-toggle{display:none}
    .primary-nav{
        position:static;
        transform:none;
        opacity:1;
        background:transparent;
        border:0;
    }
    .nav-list{
        flex-direction:row;
        align-items:center;
        gap:1rem;
        padding:0;
    }
    .nav-list a{padding:0.25rem 0}
    .header-inner{padding:1rem 0}
    .grid{
        grid-template-columns:1fr 1fr;
    }
}

@media (min-width: 1100px){
    .logo{font-size:1.75rem}
}

/* Form controls (removed inline styles from contact.html) */
.contact-form .form-control{
    width:100%;
    margin-bottom:0.5rem;
    padding:0.5rem;
    border:1px solid #eee;
    border-radius:6px;
    font:inherit;
    color:inherit;
    background:#fff;
    transition:box-shadow .12s ease, border-color .12s ease;
}

.contact-form .form-control:focus{
    outline:none;
    border-color:rgba(10,116,218,0.9);
    box-shadow:0 0 0 3px rgba(10,116,218,0.08);
}

.contact-form textarea.form-control{
    min-height:110px;
    resize:vertical;
}

.form-actions{
    margin-top:0.25rem;
}

/* Primary button */
.btn-primary{
    background:var(--brand);
    color:#fff;
    border:0;
    padding:0.5rem 0.75rem;
    border-radius:6px;
    cursor:pointer;
    font:inherit;
}
.btn-primary:focus,
.btn-primary:hover{
    filter:brightness(.98);
    box-shadow:0 1px 0 rgba(0,0,0,0.04);
}

/* Ensure site logo displays at 250x250 and doesn't get shrunk by flex/containers */
.brand-logo {
    width: 250px;
    height: 250px;
    max-width: none;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* Placeholder notice styling */
.placeholder-note {
    background: #fff4e5;
    color: #663c00;
    border-top: 4px solid #ffd59e;
    padding: 0.6rem 1rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Social links (using emoji as icons to avoid external SVGs) */
.placeholder-note .social-link {
    margin: 0 0.25rem;
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.placeholder-note .social-link:focus,
.placeholder-note .social-link:hover {
    text-decoration: underline;
}

/* If header inner is flexed, ensure it doesn't force the logo to shrink */
.header-inner {
    align-items: center;
    gap: 1rem;
}

/* Crundt image gallery: fixed-size tiles, layout adapts by wrapping */
.crundt-gallery {
    display: grid;
    gap: 0.75rem;
    /* fixed column width so tiles stay a constant size */
    grid-template-columns: repeat(auto-fill, 240px);
    justify-content: center; /* center the grid when there is extra space */
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.crundt-item {
    width: 240px;
    height: 240px; /* fixed square tiles — change 140px to desired fixed size */
    overflow: hidden;
    border-radius: 8px;
    background: #f6f6f6;
}

/* Image fills the tile while preserving crop */
.crundt-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Breakpoints: 2 columns on small tablets, 4 on large screens */
@media (min-width: 600px) {
    .crundt-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
    .crundt-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* Optional: a subtle focus style for keyboard users */
.crundt-item img:focus {
    outline: 3px solid #ffd59e;
    outline-offset: 2px;
}

/* mobile nav: hide by default, show when .open is set by JS */
@media (max-width: 768px) {
  .nav-toggle { display: inline-block; /* ensure visible on small screens */ }

  .primary-nav {
    display: none;
  }
  .primary-nav.open {
    display: block;
  }

  .nav-list { list-style:none; padding:0; margin:0; }
  .nav-list li { margin: .5rem 0; }
}