/*Основа*/
:root{ 
    --main-background:#f7fafc; 
    --main-accent-color:hsl(215, 91%, 49%); 
    --main-accent-color-dark: hsl(215, 91%, 39%);
    --main-muted-color:#6b7280; 
    --main-radius:12px; 
    --main-padding:12px;
    --main-padding-small:8px;
    --main-transition-duration:0.3s;

    --card-background:#ffffff; 
    --card-shadow:0 5px 10px rgba(12,20,35,0.2);

    font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:var(--main-background);
    color:#0f172a;
    line-height:1.45;
    overflow-x: hidden;
}
    
.container{
    max-width:1100px;
    margin:28px auto;
    padding:20px;
    padding-top: 0;
    margin-top: 0;
}

h1{
    margin:0 0 12px;
    font-size:28px;
}

.btn{
    background:var(--main-accent-color);
    color:#fff;
    padding:10px 14px;
    border-radius:10px;
    border:0;
    font-weight:700;
    cursor:pointer;
    transition-duration: var(--main-transition-duration);
}

.btn:hover{
    background:var(--main-accent-color-dark);
}



/*Шапка*/
header{
    background-color: var(--card-background);
    position: sticky;
    top: 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding: 5px;
    border-radius: 0 0 var(--main-radius) var(--main-radius);
    box-shadow: 0 6px 10px rgba(12,20,35,0.25);
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:inherit;
}

.logo{
    width:46px;
    height:46px;
    border-radius:10px;
    background:linear-gradient(135deg,#0b6cf0,#00b6ff);
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-weight:700;
    font-size:18px;
}

nav a{
    margin-left:18px;
    text-decoration:none;
    color:var(--main-muted-color);
    font-weight:600;
    position: relative;
    transition-duration: var(--main-transition-duration);
}

nav a::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--main-accent-color);
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out;
}

nav a:hover{
    color:var(--main-accent-color-dark);
}   

nav a:hover::before{
    visibility: visible;
    transform: scaleX(1);
}


.menu-button{
    display:none;
}



/*Главная часть*/
.hero{
    display:grid;
    grid-template-columns:1fr 380px;
    gap:24px;
    margin-top:28px;
    align-items:start;
}

.hero-card{
    background:var(--card-background);
    padding:28px;
    border-radius:var(--main-radius);
    box-shadow:var(--card-shadow);
}

.hero p.lead{
    margin:0 0 18px;
    color:var(--main-muted-color);
}

.hero .search{
    display:flex;
}

.hero .search input{
    flex:1;
    padding: var(--main-padding);
    border-radius:10px 0 0 10px;
    border:1px solid var(--main-accent-color);
    font-size:15px;
    transition-duration: var(--main-transition-duration);
}

.hero .search input:focus{
    outline-color: var(--main-accent-color-dark);
}

.hero .search button{
    border-radius:0 10px 10px 0;
}



.sidebar{
    background:var(--card-background);
    padding:18px;
    border-radius:12px;
    box-shadow:var(--card-shadow);
}

.sidebar .specialties{
    display:flex;
    flex-direction:column;
}

.sidebar .specialties .specialty{
    display:flex;
    align-items:center;
    text-decoration:none;
    color:black;
    margin-bottom:8px;
    transition-duration: var(--main-transition-duration);
    text-align: center;
}

.sidebar .specialties .specialty:hover{
    color: var(--main-accent-color-dark);
}




/*Основная часть*/
main{
    margin-top:22px;
}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:16px;
    margin-bottom: 2rem;
}



/*Карточки информации*/
.card{
    background:var(--card-background);
    padding:var(--main-padding-small) var(--main-padding);
    border-radius:var(--main-radius);
    border:1px solid #eef3ff;
    box-shadow:var(--card-shadow);
    margin-bottom: 1rem;
}

.card h2{
    margin:0 0 6px;
}

.card.disclaimer{
    border-color: #ffdede;
    background-color: #fff5f5;
}

.card.disclaimer h4{
    margin:0 0 6px;
    color:#d32f2f;
}








/*Подвал*/
footer{
    margin-top:36px;
    padding:18px;
    text-align:center;
    color:var(--main-muted-color);
    font-size:14px;
}


/*Адаптив*/
@media (max-width:880px){ 
    .hero{
        grid-template-columns:1fr;
    } 

    .sidebar{
        order:2;
    } 

    /*Mobile collapsable menu*/
    
}

@media (max-width:768px){ 
    nav{
        position:absolute;
        display: flex;
        flex-direction: column;
        gap:12px;
        top:60px;
        right:-10px;
        transform: translateX(calc( 100% + 30px));
        background-color: var(--card-background);
        padding:12px;
        border: 1px solid var( --main-accent-color);
        border-radius:var(--main-radius);
        box-shadow: 0 6px 10px rgba(12,20,35,0.55);
        margin-inline: 10px;
        transition-duration: var(--main-transition-duration);
    }

    nav.open{
        transform: translateX(0);
    }

    .menu-button{
        display: block;
        width:38px;
        height:38px;
        background: none;
        border: 1px solid var(--main-accent-color);
        margin-right: 5px;
        border-radius: 5px;
        cursor: pointer;
        position: relative;
        color: var(--main-accent-color);
        padding: 0;
        transition-duration: var(--main-transition-duration);
    }

    .menu-button svg{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 27px;
        height: 27px;
    }

    .menu-button:hover{
        background-color: var(--main-accent-color);
        color: white;
    }
}