/* Reset and Base Styling */

/* Beth's handwritten font (/assets/fonts/Beth-Regular_2.ttf) */
@font-face {
    font-family: 'BethHand';
    src: url('../assets/fonts/Beth-Regular_2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

:root {
    --background-1: #000;
    --background-2: #fff;
   --body-font: 'Inclusive Sans', sans-serif;
    --special-font: 'BethHand', 'Patrick Hand', 'Segoe Script', 'Bradley Hand', cursive;
    --heading-font: var(--special-font);

    --grey: #888;
    --light-grey: color-mix(in srgb, var(--grey) 30%, white);
    --dark-grey: color-mix(in srgb, var(--grey) 50%, black);
    --extralight-grey: color-mix(in srgb, var(--grey) 10%, white);



    /* Beth's theme colours*/
        --pink: #E32D91; 
--theme-pink:color-mix(in srgb, #E32D91 10%, white);

    --extralight-pink: color-mix(in srgb, var(--pink) 10%, white);
    --light-pink: color-mix(in srgb, var(--pink) 30%, white);
    --dark-pink: color-mix(in srgb, var(--pink) 80%, black);
--purple: #A365D1;
--light-purple: color-mix(in srgb, var(--purple) 30%, white);
--extralight-purple: color-mix(in srgb, var(--purple) 10%, white);
--dark-purple: color-mix(in srgb, var(--purple) 80%, black);
--blue:  #4EA6DC;
--light-blue: color-mix(in srgb, var(--blue) 30%, white);
--extralight-blue: color-mix(in srgb, var(--blue) 10%, white);
--dark-blue: #4775E7;
--pale-blue: #81C8F3;
--green: #43BFC6;
--light-green: color-mix(in srgb, var(--green) 30%, white);
--dark-green: color-mix(in srgb, var(--green) 80%, black);
 color-scheme: light; 
}

 * { margin:0; padding:0; box-sizing:border-box; }


/* Homepage Additions for Beth's Theme */
 html {
            background-color: var(--extralight-pink);
            background-image: linear-gradient(to bottom,
                var(--extralight-pink) 0%,
                color-mix(in srgb, var(--purple) 8%, white) 45%,
                var(--light-purple) 100%);
            background-attachment: fixed;
            background-repeat: no-repeat;
            min-height: 100%;
        }
     
/* General Styling */
body {

    /* Beth's custom mouse pointer (hotspot at the tip, top-left) */
    cursor: url('../assets/cursors/cursor.svg') 2 2, auto !important;

    /* background-color: var(--theme-pink); */
    font-family: var(--body-font);
    color: #000;
    max-width:100vw;
    margin: 0 auto;
    /* padding: 20px auto; */
    min-height: 100vh;
    /* background: linear-gradient(135deg, var(--extralight-pink) 0%, #fff 50%, var(--light-purple) 100%); */
    
            background-size: 250% 250%;
            /* animation: bgDrift 24s ease-in-out infinite; */

  }

  /* ---------- Custom cursor family ----------
     All hotspots assume the SVGs are sized ~26x36 like cursor.svg.
     Adjust the two numbers after each url() if a shape's active point differs.
       cursor.svg            default arrow (hotspot: tip, top-left)
       cursor-link.svg       pointing finger, for links/buttons (hotspot: fingertip)
       cursor-click.svg      shown while the mouse is pressed down
       cursor-forbidden.svg  disabled / not-allowed things
       cursor-grab.svg       open hand, for draggable things
       cursor-grabbing.svg   closed hand, while actively dragging
       cursor-loading.svg    spinner ring, for busy / loading states
       cursor-text.svg       I-beam, for editable text                     */

  /* Text fields -> I-beam (hotspot centred) */
  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea, [contenteditable="true"] {
    cursor: url('../assets/cursors/cursor-text.svg') 8 18, text !important;
  }

  /* Busy / loading -> spinner ring (hotspot centred) */
  [aria-busy="true"], .loading, .is-loading {
    cursor: url('../assets/cursors/cursor-loading.svg') 13 13, wait !important;
  }

  /* Links & buttons -> pointing finger (fingertip hotspot near top-centre) */
  a, button, label, summary, [role="button"], [onclick] {
    cursor: url('../assets/cursors/cursor-link.svg') 9 2, pointer !important;
  }

  /* Pressed / clicking -> click cursor (tip hotspot, like the arrow) */
  a:active, button:active, label:active, summary:active,
  [role="button"]:active, [onclick]:active, body:active {
    cursor: url('../assets/cursors/cursor-click.svg') 10 16, pointer !important;
  }

  /* Disabled things -> forbidden (hotspot centred on the circle) */
  [disabled], :disabled, .disabled, [aria-disabled="true"] {
    cursor: url('../assets/cursors/cursor-forbidden.svg') 17 16, not-allowed !important;
  }

  /* Draggable things -> open hand; while dragging -> closed hand */
  [draggable="true"], .grab {
    cursor: url('../assets/cursors/cursor-grab.svg') 18 16, grab !important;
  }
  [draggable="true"]:active, .grab:active, .grabbing {
    cursor: url('../assets/cursors/cursor-grabbing.svg') 16 18, grabbing !important;
  }
  /* @keyframes bgDrift {
            0%, 100% { background-position: 0% 0%; }
            50%      { background-position: 100% 100%; }
        } */
  .content-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .blue {
    background-color: var(--blue);
    color: #fff;
  }

  .pink {
    background-color: var(--pink);
    color: #fff;
  }

  .purple {
    background-color: var(--purple);
    color: #fff;
  }
  .dark-purple {
    background-color: var(--dark-purple);
    color: #fff;
  }
  .dark-pink {
    background-color: var(--dark-pink);
    color: #fff;
  }

  .green {
    background-color: var(--green);
    color: #000;
  }

  .pale-blue {
    background-color: var(--pale-blue);
    color: #000;
  }

  .dark-blue {
    background-color: var(--dark-blue);
    color: #fff;
  }

  .light-blue {
    background-color: var(--light-blue);
    color: #000;
  }

  .light-pink {
    background-color: var(--light-pink);
    color: #000;
  }

  .light-purple {
    background-color: var(--light-purple);
    color: #000;
  }


.light-green {
    background-color: var(--light-green);
    color: #000;
  }

  
h1 {
    font-family: var(--heading-font);
    font-size: 4rem;
    text-align: center;
    margin: 10px auto;
    background: linear-gradient(135deg, var(--pink), var(--purple), var(--blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

h2 {
    font-family: var(--heading-font);
    font-size: 2rem;
    margin: 0 auto 5px;
    color: var(--dark-blue);
    /* -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; */
}

/* ---- Bullet list: Beth's hand-drawn star, filled with the theme gradient ----
   Shared default so any page using ul.dot-list gets star bullets. The mask url is
   resolved relative to this file (styles/), so ../assets/... works at any page depth. */
ul.dot-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}
ul.dot-list li {
    position: relative;
    padding-left: 28px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #1a1a2e;
}
ul.dot-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, var(--pink), var(--purple));
    -webkit-mask: url('../assets/icons/star.svg') center / contain no-repeat;
    mask: url('../assets/icons/star.svg') center / contain no-repeat;
}
 .placeholder img + ::after { display: none; }
        section:has(> .placeholder) ,
        .note,
        .to-do {
            display:none !important; /* TODO: add images and remove this */
        }



@media (max-width: 700px) {

            body {
                background:
                linear-gradient(to bottom,
                    var(--theme-pink) 0%,
                    var(--extralight-purple) 15%,
                    #fff 55%,
                    var(--extralight-purple) 75%,
                    var(--theme-pink) 85%);
                    /* radial-gradient(ellipse 60% 60% at 18% 22%, color-mix(in srgb, var(--pink)   55%, transparent) 0%, transparent 55%),
                    radial-gradient(ellipse 70% 70% at 82% 78%, color-mix(in srgb, var(--blue)   55%, transparent) 0%, transparent 55%),
                    radial-gradient(ellipse 80% 50% at 50% 50%, color-mix(in srgb, var(--purple) 35%, transparent) 0%, transparent 60%); */
                    /* linear-gradient(135deg, var(--extralight-pink) 0%, #fff 50%, var(--light-purple) 100%); */
            }

          }