/* الورشة الإسلامية للنجارة — shared site patterns (ws- prefix). Load after tokens.css. Docs: docs/design-system/README.md */

:root{
  /* Paper texture, level B lightened for the site: tone + fibre + grain, tiled. Stand-in until Paper Shaders is installed. */
  --ws-paper-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='3' seed='12' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .31 0 0 0 1.4 -.62'/%3E%3C/filter%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.45' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .31 0 0 0 .9 -.48'/%3E%3C/filter%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .18 0 0 0 0 .16 0 0 0 .22 -.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)' opacity='.16'/%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.2'/%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.45'/%3E%3C/svg%3E");
  /* Light wood grain under green paint (primary button) */
  --ws-grain-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.17' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.97 0 0 0 0 0.95 0 0 0 0 0.89 0 0 0 1.7 -0.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

:root{
  --ws-grain-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.17' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.33 0 0 0 0 0.18 0 0 0 0 0.16 0 0 0 1.7 -0.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
/* Photo placeholder for previews and empty states: light wood with a caption */
.ws-ph{box-sizing:border-box;position:relative;display:flex;align-items:flex-end;justify-content:flex-start;width:100%;height:100%;padding:var(--space-3);background:var(--sawdust);color:var(--oud);font:600 13px/1.4 var(--font-body)}
.ws-ph::before{content:"";position:absolute;inset:0;background-image:var(--ws-grain-dark);background-size:420px 120px;mix-blend-mode:multiply;opacity:.4}
.ws-ph--green{background:var(--shelf-green)}
.ws-ph--wall{background:var(--wall)}
.ws-ph span{position:relative;background:var(--paper);padding:2px 8px}

/* ---------- Base ---------- */
.ws-root{direction:rtl;background:var(--canvas);color:var(--ink);font:400 17px/1.85 var(--font-body)}
.ws-root *,.ws-root *::before,.ws-root *::after{box-sizing:border-box;border-radius:var(--radius)}
/* Phones/tablets: no image is ever wider than its container (Safari can size a grid column from an image's natural width) */
@media (max-width:960px){.ws-root img{max-width:100%}}
.ws-paper{position:relative;isolation:isolate}
.ws-paper::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--ws-paper-tex);mix-blend-mode:multiply;pointer-events:none}
.ws-h1{margin:0;font:400 44px/1.2 var(--font-display);color:var(--oud)}
.ws-h2{margin:0;font:400 32px/1.25 var(--font-display);color:var(--oud)}
.ws-lead{margin:0;font:500 20px/1.8 var(--font-body);max-width:var(--measure)}
.ws-eyebrow{margin:0;font:600 13px/1.6 var(--font-body);color:var(--ink-muted)}
.ws-en{direction:ltr;font-family:var(--font-latin)}

/* ---------- Layout ---------- */
.ws-container{width:100%;max-width:calc(var(--container) + 2 * var(--space-8));margin-inline:auto;padding-inline:var(--space-8)}
.ws-section{padding-block:var(--space-24)}
.ws-section--wall{background:var(--wall-light)}
.ws-section--sawdust{background:var(--sawdust-light)}
.ws-section--oud{background:var(--oud);color:var(--on-dark)}
.ws-section--oud .ws-h1,.ws-section--oud .ws-h2{color:var(--sawdust)}
.ws-section__head{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-8)}
.ws-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.ws-rule{height:var(--hairline);background:var(--sawdust);border:0;margin:0}
@media (max-width:960px){.ws-section{padding-block:var(--space-16)}.ws-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.ws-container{padding-inline:var(--space-4)}.ws-section{padding-block:var(--space-12)}.ws-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Buttons ---------- */
.ws-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--tap-min);padding:10px 22px;font:600 15px/1.6 var(--font-body);text-decoration:none;border:1.5px solid transparent;cursor:pointer}
.ws-btn--primary{background:var(--machine-green);color:var(--paper);border:0;box-shadow:inset 0 calc(-1 * var(--plank-edge)) 0 var(--oud)}
.ws-btn--primary::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--ws-grain-light);background-size:420px 120px;mix-blend-mode:screen;opacity:.22;pointer-events:none}
.ws-btn--primary:hover{background:var(--machine-green-deep)}
.ws-btn--secondary{background:transparent;color:var(--oud);border-color:var(--oud)}
.ws-btn--secondary:hover{background:var(--sawdust)}
.ws-btn--lg{font-size:17px;padding:14px 32px}
.ws-btn:focus-visible,.ws-link:focus-visible,.ws-input:focus-visible{outline:2px solid var(--oud);outline-offset:3px}
.ws-btn:disabled{background:var(--sawdust);color:var(--wood);box-shadow:none;cursor:not-allowed}
.ws-btn:disabled::before{display:none}
.ws-link{color:var(--oud);font-weight:600;text-decoration:underline;text-decoration-color:var(--wood);text-underline-offset:5px;text-decoration-thickness:1.5px}
.ws-link:hover{text-decoration-color:var(--oud)}

/* ---------- Work card ---------- */
.ws-card{display:flex;flex-direction:column;background:var(--canvas);box-shadow:inset 0 0 0 var(--hairline) var(--sawdust),inset 0 calc(-1 * var(--plank-edge)) 0 var(--wood);color:inherit;text-decoration:none}
.ws-card__media{aspect-ratio:4/3;background:var(--wall);overflow:hidden;margin:var(--space-2) var(--space-2) 0}
.ws-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.ws-card__body{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4) var(--space-4) var(--space-6)}
.ws-card__title{margin:0;font:400 24px/1.3 var(--font-display);color:var(--oud)}
.ws-card__meta{margin:0;font:400 13px/1.6 var(--font-body);color:var(--ink-muted)}
.ws-card__text{margin:0;font:400 15px/1.8 var(--font-body)}
.ws-card:hover .ws-card__title{text-decoration:underline;text-decoration-color:var(--wood);text-underline-offset:6px}
.ws-card:focus-visible{outline:2px solid var(--oud);outline-offset:3px}
.ws-tag{display:inline-block;padding:var(--space-1) var(--space-2);background:var(--shelf-light);color:var(--oud);font:600 13px/1.4 var(--font-body)}

/* ---------- Form ---------- */
.ws-field{display:flex;flex-direction:column;gap:var(--space-2)}
.ws-label{font:600 15px/1.6 var(--font-body);color:var(--oud)}
.ws-hint{font:400 13px/1.6 var(--font-body);color:var(--ink-muted)}
.ws-input{width:100%;min-height:var(--tap-min);padding:var(--space-3) var(--space-4);background:var(--paper);color:var(--oud);font:400 16px/1.6 var(--font-body);border:1.5px solid var(--wood)}
.ws-input::placeholder{color:var(--wood)}
.ws-input:hover{border-color:var(--oud)}
textarea.ws-input{min-height:120px;resize:vertical}
select.ws-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23542D29' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");background-position:left 16px center;background-size:14px 14px;background-repeat:no-repeat;padding-left:var(--space-12)}
.ws-field--error .ws-input{border-color:var(--rust);box-shadow:inset 0 0 0 1px var(--rust)}
.ws-error{font:600 13px/1.6 var(--font-body);color:var(--rust)}
.ws-check{display:flex;align-items:center;gap:var(--space-2);font:400 15px/1.6 var(--font-body)}
.ws-check input{width:20px;height:20px;accent-color:var(--machine-green);margin:0}

/* ---------- Header / footer ---------- */
.ws-header{position:relative;z-index:2;background:var(--canvas);border-bottom:var(--hairline) solid var(--sawdust)}
.ws-header__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);min-height:var(--header-height)}
.ws-logo{display:inline-block;font-family:var(--font-display);font-weight:400;line-height:1;white-space:nowrap;color:var(--oud);text-decoration:none;font-size:28px}
.ws-logo__s{display:block;text-align:right;font-size:.48em;margin-bottom:-.04em;padding-right:.12em}
.ws-logo__n{display:block;letter-spacing:-.01em}
.ws-nav{display:flex;align-items:center;gap:var(--space-6);font:600 15px/1.6 var(--font-body)}
.ws-nav a{color:var(--oud);text-decoration:none;padding-block:var(--space-2);border-bottom:2px solid transparent}
.ws-nav a:hover,.ws-nav a[aria-current="page"]{border-bottom-color:var(--machine-green)}
.ws-menu-btn{display:none;width:var(--tap-min);height:var(--tap-min);background:transparent;border:1.5px solid var(--oud);cursor:pointer}
.ws-footer{background:var(--oud);color:var(--on-dark);padding-block:var(--space-12) var(--space-6)}
.ws-footer a{color:var(--paper);text-decoration-color:var(--sawdust)}
.ws-footer .ws-logo{color:var(--sawdust)}
.ws-footer__cols{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:var(--space-8)}
.ws-footer__h{margin:0 0 var(--space-3);font:600 13px/1.6 var(--font-body);color:var(--sawdust)}
.ws-footer__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2);font:400 15px/1.6 var(--font-body)}
.ws-footer__base{margin-top:var(--space-8);padding-top:var(--space-4);border-top:var(--hairline) solid var(--wood);font:400 13px/1.6 var(--font-body);color:var(--sawdust)}
@media (max-width:760px){.ws-nav{display:none}.ws-menu-btn{display:inline-flex;align-items:center;justify-content:center}.ws-header__in{min-height:64px}.ws-footer__cols{grid-template-columns:minmax(0,1fr)}}
.ws-section--oud .ws-btn--secondary,.ws-footer .ws-btn--secondary{color:var(--paper);border-color:var(--sawdust)}
.ws-section--oud .ws-btn--secondary:hover,.ws-footer .ws-btn--secondary:hover{background:var(--machine-green)}
.ws-icon{width:20px;height:20px;flex:none;fill:none;stroke:var(--oud);stroke-width:1.75;stroke-linecap:square;stroke-linejoin:miter}
.ws-footer .ws-icon,.ws-section--oud .ws-icon{stroke:var(--sawdust)}

/* ---------- Festive accents (palette only) ---------- */
/* Shelf stripe: painted shelf edges in unequal bands. Top of header, above footer, section dividers. */
.ws-stripe{display:block;height:6px;border:0;margin:0;background:linear-gradient(to left,var(--machine-green) 0 38%,var(--shelf-green) 38% 64%,var(--sawdust) 64% 84%,var(--wood) 84% 100%)}
.ws-stripe--thick{height:10px}
/* Photo mat: a light frame that lifts a project photo off any background */
.ws-photo{display:block;padding:var(--space-2);background:var(--canvas);box-shadow:inset 0 0 0 var(--hairline) var(--sawdust)}
.ws-photo img{display:block;width:100%;height:auto}
/* Colour chip for counts and highlights: «+٣٠٠ مطبخ» */
.ws-badge{align-self:flex-start;justify-self:start;display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);background:var(--shelf-green);color:var(--oud);font:600 13px/1.4 var(--font-body)}
.ws-badge--sawdust{background:var(--sawdust)}

/* ---------- Paper Shaders ---------- */
/* paper.js mounts a WebGL Paper Texture on [data-ws-paper]; once mounted, the SVG fallback is hidden. */
.ws-paper--shader::before{display:none}
/* The library only styles its canvas under [data-paper-shader], which paper.js does not set, so the canvas is placed here. */
[data-ws-paper]{position:relative;isolation:isolate}
[data-ws-paper] > canvas{contain:strict;display:block;position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}